/* ===================================================================
   Zetter — X (Twitter) inspired design system
   =================================================================== */

:root {
  color-scheme: light;
  --compose-viewport-height: 100dvh;
  --compose-viewport-offset-top: 0px;
  --compose-keyboard-inset: 0px;
  --compose-dock-height: 76px;
  --main-header-height: 53px;
  --app-bottom-offset: 0px;
  --chat-bottom-nav-height: 0px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #ffffff;
  --bg-hover: #f6f6f7;
  --bg-secondary: #f6f6f7;
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --border: #e7e7e9;
  --border-card: rgba(0, 0, 0, 0.1);
  --post-divider: #e7e7e9;
  --text: #1c1c1e;
  /* セカンダリ文字色は青みを避けたニュートラルグレー。ダークは白68%で定義。 */
  --text-secondary: rgba(0, 0, 0, 0.62);
  --text-soft: rgba(0, 0, 0, 0.45);
  --s1: 5px;
  --s2: 8px;
  --s3: 13px;
  --s4: 21px;
  --s5: 34px;
  --s6: 55px;
  --post-topic-color: #286aa8;

  /* キャストのバッジ種別色（2026-08-08 オーナー要望）。Zetterの基調はモノクロなので、
     原色ベタは使わず彩度を落としたトーンで色相だけ変える。
     **意図的にテーマ非依存**: バッジは一覧カードでは画像の上のスクリム付きチップ、詳細ページ
     では地の上の濃色チップとして、ライト/ダークどちらでも「白文字の濃いチップ」で出る。
     ここを明るくするとダークで白文字が読めなくなるので、両テーマで同じ値を使う。
     どの色も白文字とのコントラスト比4.5:1以上（WCAG AA）を満たす値にしてある。
     :root に1回だけ置くのは、カード側(#cast-home-view等)と詳細側(#cast-detail-view)で
     スコープが違い、各所に複製するとどれかが取り残されるため。 */
  --cast-badge-story-bg: #4f5b93;
  --cast-badge-multi-bg: #6a5b93;
  --cast-badge-chat-bg: #3d6f66;
  --cast-badge-official-bg: #2b6cb0;
  --cast-badge-new-bg: #a85b2c;
  --primary: #1c1c1e;
  --primary-hover: #303033;
  --primary-soft: rgba(0, 0, 0, 0.1);
  --accent: #1c1c1e;
  --accent-soft: rgba(0, 0, 0, 0.1);
  --danger: #f4212e;
  --like: #f91880;
  --like-bg: rgba(249, 24, 128, 0.1);
  --repost: #00ba7c;
  --repost-bg: rgba(0, 186, 124, 0.1);
  --notif-reply: #1d9bf0;
  --notif-quote: #7856ff;
  --comment-hover: rgba(0, 0, 0, 0.1);
  --success: #00ba7c;
  /* 推し済みの★。モノクロ基調の中で唯一の色付きなので、主張しすぎない山吹寄りにする。 */
  --oshi-star: #e0a300;
  --compose-spoiler-guide-bg: rgba(226, 232, 240, 0.74);
  --compose-spoiler-guide-border: rgba(148, 163, 184, 0.62);
  --compose-spoiler-guide-outer: rgba(148, 163, 184, 0.2);
  --compose-spoiler-guide-pending-bg: rgba(214, 223, 234, 0.9);
  --compose-spoiler-guide-pending-border: rgba(120, 138, 160, 0.82);
  --compose-spoiler-guide-pending-outer: rgba(120, 138, 160, 0.28);
  --shadow-fab: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.16);
  --radius-pill: 9999px;
  --cast-timeline-feedback-surface: #111113;
  --cast-timeline-feedback-ink: #f2f3f5;
  --cast-timeline-feedback-accent: #3d8bff;
  --cast-timeline-feedback-border: rgba(255, 255, 255, 0.07);
  --cast-timeline-feedback-radius: 13px;
  --transition: 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic Medium",
    Meiryo, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151516;
  --bg-hover: #1d1d1f;
  --bg-secondary: #1d1d1f;
  --bg-overlay: rgba(21, 21, 22, 0.9);
  --border: #303033;
  --border-card: rgba(255, 255, 255, 0.1);
  --post-divider: #303033;
  --text: #e5e7eb;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-soft: rgba(255, 255, 255, 0.48);
  --post-topic-color: #8cbef1;
  --primary: #ffffff;
  --primary-hover: #e5e7eb;
  --primary-soft: rgba(255, 255, 255, 0.16);
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.16);
  --comment-hover: rgba(255, 255, 255, 0.1);
  /* 黒背景では明るめにしないと沈むので、ライトより一段上げる。 */
  --oshi-star: #ffc933;
  --compose-spoiler-guide-bg: rgba(232, 236, 240, 0.22);
  --compose-spoiler-guide-border: rgba(255, 255, 255, 0.5);
  --compose-spoiler-guide-outer: rgba(255, 255, 255, 0.08);
  --compose-spoiler-guide-pending-bg: rgba(244, 247, 250, 0.3);
  --compose-spoiler-guide-pending-border: rgba(255, 255, 255, 0.66);
  --compose-spoiler-guide-pending-outer: rgba(255, 255, 255, 0.12);
  --shadow-fab: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .compose-btn-large,
:root[data-theme="dark"] .sidebar-guest-cta-btn,
:root[data-theme="dark"] .btn-primary {
  color: #000000;
}

:root[data-theme="dark"] .fab .icon {
  fill: #000000;
}

/* ---- Boot splash ----
   ログイン状態(state.me)の判定が終わる(bootstrap()完了)までアプリ全体を覆う。
   アバターやゲスト向け導線が「未ログイン扱い」で一瞬フラッシュするのを防ぐ。
   bootstrap() が state.bootstrapLoading=false にした直後に hidden を付与して消す。 */
.app-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.15s ease;
}

.app-boot-splash[hidden] {
  display: none;
}

.app-boot-splash-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
}

/* Policy bundle consent blocks normal app surfaces once bootstrap says consent is required. The
   account-deletion and support views remain reachable from the gate. It stays above the boot
   splash (10000) so normal UI never flashes between bootstrap and the gate. */
.policy-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(var(--s3), env(safe-area-inset-top, 0px)) var(--s2) max(var(--s3), env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}

.policy-consent-modal {
  width: min(100%, 520px);
  box-sizing: border-box;
  padding: var(--s4);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 20px 70px rgba(15, 20, 25, 0.25);
}

.policy-consent-title {
  margin: 0;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  line-height: 1.3;
}

.policy-consent-summary {
  margin: 16px 0 0;
  color: var(--text-secondary);
}

.policy-consent-links {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.policy-consent-links a,
.policy-consent-alternative-links a,
.policy-consent-alternative-links button {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-consent-alternative-links button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.policy-consent-submit {
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--bg);
  font-weight: 700;
  cursor: pointer;
}

.policy-consent-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.policy-consent-error {
  margin: 0 0 14px;
  color: var(--danger);
  font-size: 0.9rem;
}

.policy-consent-alternatives {
  margin: var(--s3) auto 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-align: center;
}

.policy-consent-alternative-links {
  display: flex;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s2);
}

:root[data-theme="dark"] .policy-consent-modal {
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.72);
}

@media (max-height: 560px) {
  .policy-consent-overlay {
    align-items: flex-start;
  }
}

/* ワールドハブ(/worlds): SNS/Castどちらの世界にも属さない中立の全画面。案B「画面まるごと
   二分」（オーナー決定・2026-08-29）。#app-boot-splash と .app の間に独立配置。
   仕様: .ai/world-hub-planB-spec.md（.ai/worlds-mock.html 290-324行の抽出＋レスポンシブ変換）。 */
.world-hub-view {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  /* 横向きスマホ等の低い viewport で二分面が到達不能にならないよう、コンテナ側を
     スクロール可能にする（旧カード版からの継続方針）。 */
  overflow-y: auto;
  background: var(--bg);
}

.world-hub-view[hidden] {
  display: none;
}

.world-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 640px;
  min-height: 100svh;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.world-hub-logo-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-hub-logo-word {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}

/* ---- お知らせバナー（JSが #world-hub-notices の中身を描画する。0件時は非表示） ---- */

.world-hub-notices {
  flex: 0 0 auto;
  margin-top: 16px;
  padding: 0 16px;
}

.world-hub-notices[hidden] {
  display: none;
}

.world-hub-notices-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  /* スクロールバーを隠す（1件のときはそもそもスクロールしない） */
  scrollbar-width: none;
}

.world-hub-notices-track::-webkit-scrollbar {
  display: none;
}

.world-hub-notice {
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: 108px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 14px 0 13px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e2e7ef;
  box-shadow: 0 12px 26px rgba(20, 30, 60, 0.1);
}

:root[data-theme="dark"] .world-hub-notice {
  background: var(--bg-secondary);
  border-color: var(--border-card);
}

.world-hub-notice-face {
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 22px;
  background-image: url("/cast/zetachan-bust.webp");
  background-size: 230%;
  background-position: 52% 6%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(59, 130, 246, 0.35);
}

.world-hub-notice-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.world-hub-notice-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #2f6bff;
}

.world-hub-notice-head {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
  /* 縦画面では1行に収まらず「…」で切れていたので2行まで折り返す。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text);
}

.world-hub-notice-sub {
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.world-hub-notice-chev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #9aa3b2;
}

.world-hub-notices-dots {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.world-hub-notices-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: block;
  background: rgba(15, 20, 25, 0.16);
}

:root[data-theme="dark"] .world-hub-notices-dots i {
  background: rgba(231, 233, 234, 0.24);
}

.world-hub-notices-dots i.on {
  width: 14px;
  border-radius: 3px;
  background: var(--text);
}

/* ---- 二分面（案B本体） ---- */

.world-hub-split {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  margin-top: 16px;
  animation: world-hub-split-in 320ms ease backwards;
}

@keyframes world-hub-split-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.world-hub-split-bg-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(175deg, #fdfdfe 0%, #eceff4 62%, #e4e8ef 100%);
}

:root[data-theme="dark"] .world-hub-split-bg-light {
  background: linear-gradient(175deg, #1b1c21 0%, #17181c 62%, #141519 100%);
}

.world-hub-split-bg-dark {
  position: absolute;
  left: 0;
  right: 0;
  top: 32.6%;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(175deg, #0a0f2e 0%, #131d55 46%, #22357f 100%);
  border-radius: 52% 52% 0 0 / 66px 66px 0 0;
  box-shadow: 0 -14px 34px rgba(10, 18, 54, 0.22);
}

.world-hub-half {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  z-index: 5;
  animation: world-hub-half-fade-in 320ms ease backwards;
}

.world-hub-split .world-hub-half-cast {
  animation-delay: 80ms;
}

@keyframes world-hub-half-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.world-hub-half:active {
  transform: scale(0.99);
}

.world-hub-half:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: -3px;
}

.world-hub-half-sns {
  top: 0;
  height: 33%;
  /* .world-hub-half-art はカード外へ意図的にはみ出す配置（right:-12%等）。半面自体を
     overflow:hidden にして、はみ出し分を .world-hub-split の外（横スクロール）まで
     漏らさないようにする。 */
  overflow: hidden;
}

.world-hub-half-cast {
  top: 33%;
  bottom: 0;
  /* .world-hub-half-bust も右へはみ出す配置（right:-9%）なので同様にクリップする。 */
  overflow: hidden;
}

/* ---- SNS面 ---- */

.world-hub-half-art {
  position: absolute;
  right: -12%;
  top: -27%;
  width: 67%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.9;
  --bg: var(--bg-secondary);
  /* PC版(案P3)の横長SVGが fill="var(--artbg)" で参照する。既存の縦SVGの --bg と
     同じ運用(bg-secondary)に合わせる。 */
  --artbg: var(--bg-secondary);
}

.world-hub-half-art-svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  color: inherit;
}

/* PC版(案P3)専用の横長SVG(viewBox 720x240)。既存の縦SVG(200x200)と併置し、900px以上の
   分岐でだけ display を入れ替える。 */
.world-hub-half-art-svg-wide {
  display: none;
}

.world-hub-half-title {
  position: absolute;
  left: 26px;
  top: 16%;
  font-size: clamp(44px, 15vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--text);
  z-index: 3;
}

.world-hub-half-sub {
  position: absolute;
  left: 29px;
  top: 52%;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  z-index: 3;
}

.world-hub-half-arrow {
  position: absolute;
  right: 26px;
  top: 63%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--text);
  color: var(--bg);
}

/* ---- Cast面 ---- */

/* お知らせ星は監督裁定(2026-08-29)で SVG(viewBox 0 0 200 480 の縦長カード用)を廃止し、
   .ai/world-hub-planB-spec.md §3 の %(left/top、紺ドーム基準)+px(width/height固定)の
   絶対配置に変更。面の形が変わっても星が肥大/はみ出しない。 */
.world-hub-half-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.world-hub-star,
.world-hub-dot {
  position: absolute;
  display: block;
  /* --peak-opacity は要素ごとの style 属性で指定（仕様書§3の opacity 値）。 */
  opacity: var(--peak-opacity, 0.9);
  animation-name: world-hub-cast-sparkle-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.world-hub-star {
  background: #ffffff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.world-hub-dot {
  background: #bfe4ff;
  border-radius: 50%;
}

/* PC版(案P3)専用の追加スパークル14個。既存14個より密度が落ちる横長ドーム用の追加分。 */
.world-hub-star-pc,
.world-hub-dot-pc {
  display: none;
}

@keyframes world-hub-cast-sparkle-twinkle {
  0%, 100% {
    /* 元のCSSアニメ(0.3〜0.9)の比率(1:3)を維持しつつ、星ごとのピーク輝度(--peak-opacity)
       に対して相対的に暗転する。 */
    opacity: calc(var(--peak-opacity, 0.9) * 0.333);
  }
  50% {
    opacity: var(--peak-opacity, 0.9);
  }
}

.world-hub-half-body {
  position: absolute;
  inset: 56px 0 0;
  z-index: 3;
}

.world-hub-half-body .world-hub-half-title {
  /* static だと z-index(継承した3)が無効化され、後続の position:absolute な
     .world-hub-half-bust(z-index:2) の下に埋もれてテキストが隠れる。relative にして
     通常フローの縦積みは保ちつつ z-index を効かせ、バストより手前に描画する。 */
  position: relative;
  /* <span> は inline なのでサブタイトルと横に並んでしまう。block にして縦積みにする。 */
  display: block;
  left: auto;
  top: auto;
  margin: 0 0 0 26px;
  padding-top: 14px;
  font-size: 37px;
  letter-spacing: -0.025em;
  line-height: 1;
}

.world-hub-half-title-cast b {
  color: #fff;
  font-weight: 800;
}

.world-hub-half-title-cast em {
  font-style: normal;
  font-weight: 800;
  color: #7fd8ff;
  background: linear-gradient(90deg, #7fd8ff, #4d9bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.world-hub-half-body .world-hub-half-sub-cast {
  /* 同上（タイトルと同じ理由で static ではなく relative）。 */
  position: relative;
  display: block;
  left: auto;
  top: auto;
  margin: 6px 0 0 29px;
  color: #9fb6dc;
}

.world-hub-half-bust {
  position: absolute;
  /* cover + 幅64%だと画像がボックス左辺で断ち切られ、面の内側(左から45%付近)に
     縦の切れ目が出る。contain にして箱を画像の比率に合わせ、はみ出すのを面の
     右端と下端だけにする（画像自身の辺を面の内側で見せない）。 */
  right: -6%;
  bottom: -2%;
  width: 78%;
  height: auto;
  object-fit: contain;
  object-position: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.world-hub-half-arrow-cast {
  position: absolute;
  right: 26px;
  bottom: 52px;
  top: auto;
  background: #fff;
  color: #2f6bff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* ---- デスクトップ ---- */

@media (min-width: 768px) {
  .world-hub-inner {
    max-width: 720px;
  }

  .world-hub-logo-word {
    font-size: 34px;
  }

  .world-hub-half-title {
    font-size: 60px;
  }
}

/* 注: この横向き分岐は上のデスクトップ分岐より必ず後ろに置くこと。横向き端末は幅が
   768px を超えてデスクトップ分岐にも該当するため、先に書くとカスケードで上書きされる。 */

/* ---- 横向き・低い viewport: 左右二分に切り替える ---- */

@media (max-height: 520px) and (orientation: landscape) {
  .world-hub-inner {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    /* デスクトップ分岐の max-width:720px が効いて左右に白帯が残るため解除し、
       左右二分の面を viewport の端まで伸ばす。バナーは自前の左右16pxを保つ。 */
    max-width: none;
    padding-bottom: 0;
  }

  .world-hub-notices {
    margin-top: 8px;
  }

  .world-hub-notice {
    height: 84px;
  }

  .world-hub-split {
    /* 縦の基準min-height:320pxは横向きの低いviewport(高さ<=520px)では大きすぎ、ワード
       マーク＋バナーと合わせて画面高を超えてスクロールを誘発する。左右二分では200pxあれば
       タイトル・矢印・バストが収まる。 */
    min-height: 200px;
    margin-top: 8px;
  }

  .world-hub-split-bg-dark {
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 66px 0 0 66px / 52% 0 0 52%;
  }

  .world-hub-half-sns {
    top: 0;
    left: 0;
    right: auto;
    width: 50%;
    height: 100%;
  }

  .world-hub-half-cast {
    top: 0;
    left: 50%;
    right: 0;
    width: 50%;
    bottom: auto;
    height: 100%;
  }

  .world-hub-half-sns .world-hub-half-title {
    font-size: 44px;
  }

  .world-hub-half-body {
    inset: 0;
  }

  .world-hub-half-body .world-hub-half-title {
    padding-top: 20%;
    font-size: 30px;
  }

  .world-hub-half-body .world-hub-half-sub-cast {
    margin-top: 6px;
  }

  .world-hub-half-arrow,
  .world-hub-half-arrow-cast {
    width: 40px;
    height: 40px;
  }

  .world-hub-half-arrow-cast {
    bottom: 20px;
  }

  .world-hub-half-bust {
    /* 縦と同じ78%だと箱の高さが面の高さを超え、上辺が面の外へ出てタイトルの裏まで
       伸びる。左右二分では62%にして、面の高さに収めつつタイトルの右側で完結させる。 */
    width: 62%;
  }

  /* 横向きでは max-width を外して面を viewport の端まで伸ばしているため、ノッチ側の
     物理端に文字やボタンが寄る。安全領域の分だけ内側へ逃がす。絶対配置の子は padding では
     動かない（包含ブロックが padding box なので）ので、オフセット自体に足す。
     左右二分では SNS面の左端＝物理左端、Cast面の右端＝物理右端なので、その2辺だけ効かせる。 */
  .world-hub-notices {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }

  .world-hub-half-sns .world-hub-half-title {
    left: calc(26px + env(safe-area-inset-left, 0px));
  }

  .world-hub-half-sns .world-hub-half-sub {
    left: calc(29px + env(safe-area-inset-left, 0px));
  }

  .world-hub-half-arrow-cast {
    right: calc(26px + env(safe-area-inset-right, 0px));
  }
}

/* ---- PC版・案P3「ワイド上下二分」(オーナー決定・2026-08-30)。900px以上かつ高さ521px以上
   (横向きスマホ分岐 max-height:520px と排他)。既存のデスクトップ分岐(768px)より後ろに置く
   (カスケード事故の前例あり)。仕様: .ai/world-hub-pc-p3-spec.md ---- */

@media (min-width: 900px) and (min-height: 600px) {
  .world-hub-view {
    /* .world-hub-split-bg-dark が左右に-40pxはみ出す設計のため、横スクロールバーが
       出ないようにする（overflow-y:auto があると overflow-x が自動的に auto 化される）。 */
    overflow-x: hidden;
  }

  .world-hub-inner {
    --hub-pc-gutter: max(64px, calc((100vw - 1600px) / 2 + 64px));
    display: block;
    position: relative;
    max-width: none;
    padding: 0;
    min-height: 100svh;
  }

  .world-hub-logo-row {
    position: absolute;
    left: var(--hub-pc-gutter);
    top: 48px;
    justify-content: flex-start;
    z-index: 6;
  }

  .world-hub-notices {
    position: absolute;
    right: var(--hub-pc-gutter);
    top: 38px;
    width: min(360px, 28vw);
    margin-top: 0;
    padding: 0;
    z-index: 7;
  }

  .world-hub-notice {
    height: auto;
    border-radius: 999px;
    padding: 11px 16px 11px 12px;
  }

  .world-hub-notice-face {
    width: 46px;
    height: 46px;
  }

  .world-hub-notice-head {
    font-size: 15.5px;
    /* PCの1行ピルではサブ行を出さないので、見出しは2行クランプでなく1行ellipsisにする。 */
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .world-hub-notice-sub {
    display: none;
  }

  .world-hub-notices-dots {
    display: none;
  }

  .world-hub-split {
    position: absolute;
    inset: 0;
    margin-top: 0;
    min-height: 0;
  }

  .world-hub-split-bg-dark {
    left: -40px;
    right: -40px;
    top: 45%;
    border-radius: 50% 50% 0 0 / 96px 96px 0 0;
    box-shadow: 0 -18px 44px rgba(10, 18, 54, 0.22);
  }

  .world-hub-half-sns {
    top: 0;
    height: 45%;
  }

  .world-hub-half-cast {
    top: 45%;
    bottom: 0;
  }

  /* ---- SNS面 ---- */

  .world-hub-half-art-svg {
    display: none;
  }

  .world-hub-half-art-svg-wide {
    display: block;
    width: 100%;
    height: auto;
    color: inherit;
  }

  .world-hub-half-art {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, 47vw);
    aspect-ratio: 720 / 240;
  }

  .world-hub-half-title {
    left: var(--hub-pc-gutter);
    top: 34%;
    font-size: clamp(56px, 6.6vw, 96px);
    letter-spacing: -0.045em;
    line-height: 0.86;
  }

  .world-hub-half-sub {
    left: calc(var(--hub-pc-gutter) + 6px);
    top: 72%;
    font-size: clamp(15px, 1.2vw, 17px);
  }

  .world-hub-half-arrow {
    right: var(--hub-pc-gutter);
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
  }

  /* ---- Cast面 ---- */

  /* タイトル・サブ・矢印の縦位置を一箇所で決めるための基準値。面に置いて
     .world-hub-half-body 配下の3要素すべてに継承させる。 */
  .world-hub-half-cast {
    --hub-pc-cast-top: 28%;
    --hub-pc-cast-title-size: clamp(44px, 4.7vw, 68px);
    --hub-pc-cast-sub-size: clamp(16px, 1.25vw, 18px);
    --hub-pc-cast-sub-line: 1.3;
    --hub-pc-cast-title-gap: 20px;
    --hub-pc-cast-arrow-gap: 32px;
  }

  .world-hub-half-body {
    inset: 0;
  }

  /* スマホ版ではタイトルとサブが position:relative の通常フローで縦に積まれている。
     そこへ % の top を与えると「フロー位置からのずらし」になり、積み上がった分だけ
     位置が狂って矢印がサブの行に重なっていた（実機 1024/1440/1920 で発生）。
     PCでは絶対配置に切り替え、それぞれの top を上の要素の高さから積算して決める。
     absolute でも z-index は効くので、バストより手前に出す意図は保たれる。 */
  .world-hub-half-body .world-hub-half-title {
    position: absolute;
    left: calc(var(--hub-pc-gutter) + 46px);
    top: var(--hub-pc-cast-top);
    margin: 0;
    padding-top: 0;
    font-size: var(--hub-pc-cast-title-size);
    line-height: 1;
  }

  .world-hub-half-body .world-hub-half-sub-cast {
    position: absolute;
    left: calc(var(--hub-pc-gutter) + 50px);
    /* タイトルの下端から 20px */
    top: calc(var(--hub-pc-cast-top) + var(--hub-pc-cast-title-size) + var(--hub-pc-cast-title-gap));
    margin: 0;
    font-size: var(--hub-pc-cast-sub-size);
    line-height: var(--hub-pc-cast-sub-line);
  }

  .world-hub-half-bust {
    right: var(--hub-pc-gutter);
    bottom: 0;
    width: auto;
    height: 75%;
    object-fit: contain;
    object-position: 100% 100%;
  }

  .world-hub-half-arrow-cast {
    position: absolute;
    left: calc(var(--hub-pc-gutter) + 48px);
    right: auto;
    /* 上の .world-hub-half-arrow が SNS 側の縦中央合わせ用に translateY(-50%) を
       持っている。Cast 側の top は積算で正確な位置を出しているので、これを打ち消さないと
       35px（高さの半分）浮き上がってサブに食い込む。実測で判明した原因。 */
    transform: none;
    /* サブの下端から 32px。サブの行高(font-size × line-height)まで含めて積算する。 */
    top: calc(
      var(--hub-pc-cast-top) + var(--hub-pc-cast-title-size) + var(--hub-pc-cast-title-gap)
      + var(--hub-pc-cast-sub-size) * var(--hub-pc-cast-sub-line) + var(--hub-pc-cast-arrow-gap)
    );
    bottom: auto;
  }

  .world-hub-star-pc,
  .world-hub-dot-pc {
    display: block;
  }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .world-hub-split,
  .world-hub-half {
    animation: none;
  }

  .world-hub-star,
  .world-hub-dot {
    animation: none;
  }
}

/* ---- Reset ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

p, span, h1, h2, h3, h4, h5, h6, time, label, textarea, input, .post-body, .notif-body {
  -webkit-user-select: text;
  user-select: text;
}

.zeta-chat-bubble,
.zeta-chat-message-body,
.zeta-chat-message-body *,
.zeta-chat-copy-btn {
  -webkit-user-select: text;
  user-select: text;
}

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  outline: none;
}

/* Prevent ALL blue selection/hover on touch devices */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }
  *:focus:not(:focus-visible) { outline: none !important; }
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overscroll-behavior-y: none;
  touch-action: pan-x pan-y;
}

body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Lock document scrolling only for modal/full-screen surfaces. The broader
   pull-refresh-blocked state below only contains touch overscroll. */
html.pull-refresh-surface-open,
body.pull-refresh-surface-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Routed full-screen workspaces are not pull-to-refresh surfaces. Keep their internal
   scroll edges from chaining into the page shell. */
body.pull-refresh-blocked .main,
body.pull-refresh-blocked .main > :not([hidden]),
body.pull-refresh-blocked .feed-view,
body.pull-refresh-blocked #world-hub-view,
body.pull-refresh-blocked #cast-create-view,
body.pull-refresh-blocked #cast-chat-view,
body.pull-refresh-blocked .cast-lorebook-screen,
body.pull-refresh-blocked [aria-modal="true"],
body.pull-refresh-blocked .sidebar.sidebar-overlay-open,
body.pull-refresh-blocked .zeta-chat-sidebar.open {
  overscroll-behavior-y: contain;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

input,
textarea {
  font-size: 16px;
}

button {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

h1, h2, h3, p {
  margin: 0;
}

/* ===================================================================
   App Shell — 3-column layout
   =================================================================== */

.app {
  display: flex;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
}

/* ===================================================================
   Sidebar (left)
   =================================================================== */

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 275px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 12px;
  overflow-y: auto;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 100%;
  padding: 12px 0;
}

/* Logo */
.logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 50px;
  border-radius: var(--radius-pill);
  transition: background var(--transition);
  margin-bottom: 2px;
  padding: 0 12px;
}

.logo-link:hover {
  background: var(--primary-soft);
}

.logo-mark-image {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.logo-wordmark {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Sidebar navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.snav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-pill);
  font-size: 20px;
  font-weight: 600;
  transition: background var(--transition);
  position: relative;
  white-space: nowrap;
}

.snav-item:hover {
  background: var(--bg-hover);
}

.snav-item.active {
  font-weight: 700;
}

.snav-item .icon,
.snav-item .nav-fa,
.snav-item .nav-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  position: relative;
}

.nav-icon .nav-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nav-icon .nav-svg-fill {
  opacity: 0;
}

.snav-item.active .nav-icon .nav-svg-outline,
.bnav-item.active .nav-icon .nav-svg-outline {
  opacity: 0;
}

.snav-item.active .nav-icon .nav-svg-fill,
.bnav-item.active .nav-icon .nav-svg-fill {
  opacity: 1;
}

:root[data-theme="dark"] .bnav-item.active .nav-icon .nav-svg-outline {
  opacity: 1;
}

:root[data-theme="dark"] .bnav-item.active .nav-icon .nav-svg-fill {
  opacity: 0;
}

:root[data-theme="dark"] .snav-item.active .nav-icon .nav-svg-outline {
  opacity: 1;
}

:root[data-theme="dark"] .snav-item.active .nav-icon .nav-svg-fill {
  opacity: 0;
}

.snav-label {
  line-height: 1;
}

.snav-item-danger {
  color: var(--danger);
}

.snav-item-danger:hover {
  background: rgba(244, 33, 46, 0.1);
}

/* デスクトップ 設定とサポート アコーディオン */
.snav-accordion {
  display: flex;
  flex-direction: column-reverse;
}

.snav-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.snav-accordion-body.open {
  grid-template-rows: 1fr;
}

.snav-accordion-body-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}

.snav-item-sub {
  padding-left: 52px;
  font-size: 17px;
}

/* デスクトップ左レールの admin 専用リンク（JSで注入） */
.snav-admin-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.snav-admin-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 12px 4px 52px;
}

.snav-admin-label {
  padding: 4px 12px 2px 52px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sidebar-submenu {
  display: grid;
  gap: 4px;
  margin: -2px 0 4px;
  padding-left: 54px;
}

.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.sidebar-subitem:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.sidebar-subitem.active {
  color: var(--text);
  font-weight: 700;
}

.sidebar-subitem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

/* Notification badge */
.badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  position: absolute;
  top: 6px;
  left: 28px;
}

/* 不具合報告 管理画面（/admin/bug-reports） */
.br-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.br-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.br-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.br-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--bg);
}

.br-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.br-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.br-card-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 8px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 6.4em;
  overflow: hidden;
}

.br-card-desc.br-expanded {
  max-height: none;
}

.br-card-desc-toggle {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 8px;
}

.br-card-url {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  word-break: break-all;
}

.br-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.br-card-note {
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.br-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.br-badge-open { background: #e5e7eb; color: #374151; }
.br-badge-reviewed { background: #dbeafe; color: #1d4ed8; }
.br-badge-fix_pending { background: #bfdbfe; color: #1e40af; }
.br-badge-user_confirmed { background: #dcfce7; color: #15803d; }
.br-badge-reopened { background: #fee2e2; color: #b91c1c; }
.br-badge-closed { background: #f3f4f6; color: #9ca3af; }

:root[data-theme="dark"] .br-badge-open { background: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .br-badge-reviewed { background: #1e3a8a; color: #dbeafe; }
:root[data-theme="dark"] .br-badge-fix_pending { background: #1d4ed8; color: #dbeafe; }
:root[data-theme="dark"] .br-badge-user_confirmed { background: #14532d; color: #dcfce7; }
:root[data-theme="dark"] .br-badge-reopened { background: #7f1d1d; color: #fee2e2; }
:root[data-theme="dark"] .br-badge-closed { background: #2f3336; color: #8b98a5; }

.br-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.br-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.br-btn:hover {
  background: var(--bg-hover);
}

.br-btn-primary {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

.br-btn-primary:hover {
  background: var(--primary-hover);
}

.br-note-form {
  margin-top: 8px;
}

.br-note-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  box-sizing: border-box;
}

.br-note-count {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 2px;
}

.br-thread-wrap {
  margin-top: 8px;
}

.br-thread-panel {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.br-thread-loading,
.br-thread-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.br-thread-error {
  font-size: 13px;
  color: #b91c1c;
  margin: 0;
}

:root[data-theme="dark"] .br-thread-error {
  color: #fca5a5;
}

.br-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.br-thread-bubble {
  max-width: 82%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.br-thread-bubble-user {
  align-self: flex-end;
}

.br-thread-bubble-assistant {
  align-self: flex-start;
}

/* 運営（staff）の自由返信。AI(assistant)と見分けられるよう地色を付ける（.ai/current-task.md 2026-08-08）。 */
.br-thread-bubble-staff {
  align-self: flex-start;
  background: var(--bg-secondary);
}

.br-thread-bubble-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.br-thread-bubble-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.br-thread-bubble-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.br-thread-bubble-images img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* 運営トークルーム 管理画面（/admin/bug-reports、.ai/current-task.md 2026-08-08）。
   寸法・配色は上の.br-*（不具合報告チケット管理）を流用し、新意匠は発明しない。 */
.ot-thread-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ot-thread-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.ot-thread-item:hover {
  background: var(--bg-hover);
}

.ot-thread-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ot-thread-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ot-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ot-badge-awaiting {
  background: #fee2e2;
  color: #b91c1c;
}

:root[data-theme="dark"] .ot-badge-awaiting {
  background: #7f1d1d;
  color: #fee2e2;
}

.ot-badge-tickets {
  background: #e5e7eb;
  color: #374151;
}

:root[data-theme="dark"] .ot-badge-tickets {
  background: #374151;
  color: #e5e7eb;
}

.ot-thread-item-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ot-thread-item-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.ot-empty,
.ot-error {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.ot-detail {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.ot-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ot-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ot-detail-messages {
  max-height: 480px;
  overflow-y: auto;
}

.ot-reply-form {
  margin-top: 10px;
}

.ot-reply-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  box-sizing: border-box;
}

.ot-reply-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.ot-reply-error {
  font-size: 12px;
  color: #b91c1c;
}

:root[data-theme="dark"] .ot-reply-error {
  color: #fca5a5;
}

/* Large compose button */
.compose-btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-top: auto;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  transition: background var(--transition);
}

.compose-btn-large:hover {
  background: var(--primary-hover);
}

.compose-btn-large-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.compose-btn-large-label {
  line-height: 1;
}

/* Sidebar user */
.sidebar-user {
  margin-top: 12px;
  padding: 12px 0;
}

.sidebar:not(.sidebar-overlay-open) #sidebar-post-btn[hidden] + .sidebar-user {
  margin-top: auto;
}

.sidebar-user:empty {
  margin-top: 0;
  padding: 0;
}

.sidebar-user-auth {
  display: flex;
  justify-content: flex-start;
}

.sidebar-user-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-user-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info span {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-legal {
  margin-top: 10px;
  padding-left: 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sidebar-user-legal-standalone {
  padding-left: 0;
}

.sidebar-user-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.sidebar-guest-panel {
  display: flex;
  flex-direction: column;
}

.sidebar-guest-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: background var(--transition);
}

.sidebar-guest-cta-btn:hover {
  background: var(--primary-hover);
}

.sidebar-quick-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.sidebar-quick-btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
}

.sidebar-quick-btn-danger:hover {
  background: rgba(244, 33, 46, 0.1);
}

.sidebar-quick-btn .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.sidebar-settings-label {
  display: none;
}

.sidebar-overlay-account {
  display: grid;
  gap: 6px;
}

.sidebar-overlay-avatar {
  display: inline-flex;
  margin-bottom: 8px;
}

.sidebar-overlay-avatar .avatar-link {
  display: inline-flex;
}

.sidebar-overlay-avatar-image {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: #cfd9de;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sidebar-overlay-name {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.sidebar-overlay-handle {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.4;
}

.sidebar-overlay-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0 0;
}

.sidebar-overlay-menu {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.sidebar-overlay-accordion {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column-reverse;
}

.sidebar-overlay-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  transition: background var(--transition);
}

@media (hover: hover) {
  .sidebar-overlay-accordion-trigger:hover {
    background: var(--bg-hover);
  }
}

.sidebar-overlay-accordion-trigger:active {
  background: var(--bg-hover);
}

.sidebar-overlay-accordion-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay-accordion-chevron.open {
  transform: rotate(0deg);
}

.sidebar-overlay-accordion-chevron .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.sidebar-overlay-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay-accordion-body.open {
  grid-template-rows: 1fr;
}

.sidebar-overlay-accordion-body-inner {
  overflow: hidden;
  display: grid;
  gap: 2px;
  padding: 0 0 4px;
}

/* 管理リンク追加で項目が増えても、低い画面で開いた項目が
   画面外に切れないよう、開いた本体側だけスクロール可能にする */
.sidebar-overlay-accordion-body.open .sidebar-overlay-accordion-body-inner {
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

.sidebar-overlay-admin-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 16px 4px;
}

.sidebar-overlay-admin-label {
  padding: 4px 16px 2px 32px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sidebar-overlay-sublink {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 16px 8px 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  transition: background var(--transition);
}

@media (hover: hover) {
  .sidebar-overlay-sublink:hover {
    background: var(--bg-hover);
    color: var(--text);
  }
}

.sidebar-overlay-sublink:active {
  background: var(--bg-hover);
  color: var(--text);
}

.sidebar-overlay-sublink:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-overlay-sublink.is-active {
  color: var(--text);
  font-weight: 700;
}

.sidebar-overlay-link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 8px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  transition: background var(--transition);
}

@media (hover: hover) {
  .sidebar-overlay-link:hover {
    background: var(--bg-hover);
  }
}

.sidebar-overlay-link:active {
  background: var(--bg-hover);
}

.sidebar-overlay-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-overlay-link.is-active {
  font-weight: 600;
}

.sidebar-overlay-link-danger {
  color: var(--danger);
}

.sidebar-overlay-link-danger:hover {
  background: rgba(244, 33, 46, 0.1);
}

.sidebar-overlay-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}

.sidebar-overlay-link-icon .icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.sidebar-overlay-link-icon i {
  font-size: 22px;
  line-height: 1;
}

.sidebar-overlay-link-icon .icon-comment {
  width: 24px;
  height: 24px;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.18);
  z-index: 54;
}

/* ===================================================================
   Main column
   =================================================================== */

.main {
  flex: 0 1 600px;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* Sticky header with blur */
.main-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 16px;
  min-height: 53px;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
   display: grid;
   grid-template-columns: 44px minmax(0, 1fr) 44px;
   align-items: center;
   gap: 10px;
   transform: translate3d(0, 0, 0);
   transition: transform 0.2s ease;
   will-change: transform;
}

.main-header.main-header--hidden {
  transform: translate3d(0, -100%, 0);
}

body.chat-view-active .main-header {
  display: none;
}

/* タイムラインで「みんな/推し」タブを出しているときは、ヘッダー下の罫線を消して
   タブ下の罫線1本にまとめる（二重線を避ける）。 */
body.timeline-tabs-active .main-header {
  border-bottom: none;
}

/* AI Cast 共通ヘッダー（2026-07-17）: /cast系5画面(home/mine/profile/create/detail)は
   グローバル#main-headerを隠し、各view自前のcast-header-barに一本化する。 */
body.cast-header-active .main-header {
  display: none;
}

body.profile-edit-active .main-header {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.header-save-btn {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
}

.header-save-btn:hover {
  color: var(--primary-hover);
}

.header-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.header-side {
   display: flex;
   align-items: center;
   min-width: 0;
}

.header-side-left {
   justify-content: flex-start;
}

.header-side-right {
   justify-content: flex-end;
}

.header-logo-link {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   flex-shrink: 0;
   color: var(--text);
   text-decoration: none;
    justify-self: center;
}

.header-logo-link.header-search-slot {
  width: 100%;
  justify-self: stretch;
  cursor: default;
}

.header-search-form {
  width: 100%;
}

.header-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.header-search-slot.focused .header-search-pill {
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
}

.header-search-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.header-search-icon .icon {
  width: 18px;
  height: 18px;
}

.header-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.header-search-input::placeholder {
  color: var(--text-secondary);
}

.header-logo {
  border-radius: 6px;
  flex-shrink: 0;
}

.header-brand-logo {
  display: block;
  /* 左右のヘッダーアイコン(40px)と「見た目」を揃える。画像はグリフが枠の約6割しか
     ないため、レイアウト枠は40pxのまま transform でグリフ実寸を約31pxに拡大する
     （枠を広げるとヘッダー縦幅が膨らむため transform を使う） */
  width: 40px;
  height: 40px;
  max-height: 100%;
  object-fit: contain;
  transform: scale(1.3);
}

:root[data-theme="dark"] .header-brand-logo {
  filter: invert(1);
}

.header-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.server-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  flex-shrink: 0;
}

.server-badge[data-server-role="A"] {
  background: rgba(13, 13, 13, 0.06);
  border-color: rgba(13, 13, 13, 0.12);
  color: var(--text);
}

.server-badge[data-server-role="Z"] {
  background: rgba(13, 13, 13, 0.03);
}

.header-title {
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.header-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
}

.header-chat-action-btn {
   min-height: 36px;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
}

.header-icon-btn,
.header-profile-btn {
   width: 40px;
   height: 40px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--text);
   transition: background var(--transition), color var(--transition);
}

.header-icon-btn:hover,
.header-profile-btn:hover,
.header-icon-btn.active,
.header-profile-btn.active {
   background: var(--bg-hover);
}

.header-icon-btn .icon,
.header-profile-btn .icon {
   width: 20px;
   height: 20px;
   fill: currentColor;
}

.header-back-btn {
   color: var(--text);
}

.header-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
  background: #cfd9de;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
   justify-content: center;
   cursor: pointer;
}

/* ヘッダー左の自分アイコンは右上のキャスト切替(40px)と見た目サイズを揃える（オーナー指定） */
.header-profile-btn .header-avatar {
   width: 40px;
   height: 40px;
}

.header-avatar .icon {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

/* ===================================================================
   Auth section
   =================================================================== */

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.auth-section {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 32px));
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
  z-index: 51;
  box-shadow: 0 4px 16px rgba(13, 13, 13, 0.1);
}

.auth-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text);
  transition: background var(--transition);
}

.auth-close-btn:hover {
  background: var(--bg-hover);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  transition: background var(--transition), color var(--transition);
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.auth-tab:hover {
  background: #e7e7e8;
}

.auth-tab.active {
  background: var(--primary);
  color: #fff;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: 16px;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ===================================================================
   Buttons
   =================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 14px;
}

/* Ko-fi差し入れリンク（設定＞Zetter Supporter）。btn-primaryの塗りボタンと
   混同されないよう、あえてoutline・モノクロにしている。 */
.btn-kofi-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-kofi-outline:hover {
  background: var(--bg-hover);
  border-color: var(--text-soft);
}

.btn-xs {
  padding: 6px 14px;
  font-size: 13px;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

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

.ghost-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================================================
   Compose section
   =================================================================== */

.compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 58;
}

.compose-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.compose-section {
  position: fixed;
  top: var(--compose-viewport-offset-top);
  left: 0;
  right: 0;
  width: 100%;
  height: var(--compose-viewport-height);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(calc(100% + 24px));
  transition: transform 0.22s ease;
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 59;
}

.compose-section.open {
  transform: translateY(0);
  pointer-events: auto;
}

.compose-section-reply {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.compose-section-reply .compose-sheet-handle {
  display: none;
}

.compose-section-reply .compose-sheet-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
}

.compose-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: #d8dde2;
  margin: 10px auto 8px;
}

.compose-sheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--border);
}

.compose-sheet-header-spacer {
  flex: 1;
}

.compose-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text);
  transition: background var(--transition);
}

.compose-close-btn:hover {
  background: var(--bg-hover);
}

.compose-footer-submit {
  min-width: 86px;
  margin-left: auto;
}

.compose-reply-context {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 8px 20px 0;
  flex: 0 0 auto;
}

.reply-compose-source {
  display: flex;
  gap: 10px;
  padding-bottom: 6px;
}

.reply-compose-source-content {
  min-width: 0;
  flex: 1;
  color: var(--text);
}

.reply-compose-source-meta {
  margin-bottom: 2px;
}

.reply-compose-source .post-body {
  margin-top: 0;
  line-height: 1.35;
}

.reply-compose-source .post-media-wrap,
.reply-compose-source .music-attachment-card {
  margin-top: 8px;
}

.reply-compose-to {
  margin-left: 50px;
  padding: 0 0 8px;
  color: var(--text-secondary);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.reply-compose-to span {
  color: var(--repost);
}

.compose-section-reply .compose-sheet-body {
  flex: 0 0 auto;
  min-height: 0;
  padding-top: 8px;
  overflow: visible;
}

/* Reply content scrolls on .compose-section itself. Keep the existing footer in that scrollport so
   the unchanged submit control remains reachable beside the keyboard, even with a tall source post. */
.compose-section-reply .compose-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
}

.compose-section-reply .compose-form {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
}

.compose-section-reply .compose-editor-stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
}

.compose-section-reply .compose-form textarea {
  flex: 0 0 auto;
  height: auto;
  min-height: 5.6em;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.compose-section-reply .compose-tools:empty {
  display: none;
}

.compose-sheet-body {
  display: flex;
  gap: 12px;
  width: min(720px, 100%);
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  padding: 18px 20px 16px;
  overflow-y: auto;
  align-items: stretch;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: #cfd9de;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  align-self: flex-start;
}

.avatar-xs {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: #cfd9de;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.compose-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  aspect-ratio: 1 / 1;
}

.compose-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  position: relative;
}

.compose-editor-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compose-spoiler-guide {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  pointer-events: none;
  z-index: 0;
}

.compose-spoiler-guide-range {
  border-radius: 7px;
  background: var(--compose-spoiler-guide-bg);
  box-shadow:
    inset 0 0 0 1px var(--compose-spoiler-guide-border),
    0 0 0 1px var(--compose-spoiler-guide-outer);
}

.compose-spoiler-guide-range.is-pending {
  background: var(--compose-spoiler-guide-pending-bg);
  box-shadow:
    inset 0 0 0 1px var(--compose-spoiler-guide-pending-border),
    0 0 0 1px var(--compose-spoiler-guide-pending-outer);
}

.compose-form textarea {
  width: 100%;
  min-height: 5.6em;
  max-height: min(52vh, 420px);
  padding: 8px 0 16px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text);
  resize: none;
  outline: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: block;
  position: relative;
  z-index: 1;
}

.compose-form textarea::selection {
  background: rgba(244, 33, 46, 0.38);
}

.compose-form textarea::-moz-selection {
  background: rgba(244, 33, 46, 0.38);
}

.compose-inline-preview-stack {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  flex: 0 0 auto;
}

.compose-inline-preview-spacer {
  flex: 0 0 auto;
  height: 0;
}

/* closed 判定のときは textarea が本文全高まで伸びる前提のため、本来この枠は
   スクロールしない。ただし iOS Chrome のようにキーボード表示を検知できず
   (visualViewport 由来の keyboardOpen が false のまま) 枠だけがキーボード分に
   縮む端末では、overflow:hidden だと本文へ到達する手段が一切無くなる (#56)。
   内容が収まっている通常時の見た目は変えずに、はみ出したときだけ縦スクロールを
   許すフェイルセーフとして overflow-y:auto にしておく。 */
.compose-section[data-compose-keyboard="closed"] .compose-sheet-body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.compose-section:has(.compose-inline-preview-stack > :not([hidden])) .compose-sheet-body {
  overflow-y: auto;
}

.compose-section[data-compose-keyboard="closed"] .compose-form {
  flex: 1 1 auto;
  min-height: 100%;
}

.compose-section:has(.compose-inline-preview-stack > :not([hidden])) .compose-form {
  height: auto;
  min-height: 0;
}

.compose-section:has(.compose-inline-preview-stack > :not([hidden])) .compose-editor-stage {
  flex: 0 0 auto;
  height: auto;
}

.compose-section[data-compose-keyboard="closed"] .compose-form textarea {
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
  max-height: none;
}

.compose-section[data-compose-keyboard="closed"] .compose-editor-stage:has(.compose-inline-preview-stack > :not([hidden])) textarea,
.compose-section[data-compose-keyboard="closed"]:has(.compose-inline-preview-stack > :not([hidden])) .compose-form textarea {
  flex: 0 0 auto;
  height: auto;
  min-height: 5.6em;
  max-height: none;
}

.compose-section-reply[data-compose-keyboard="closed"] .compose-sheet-body {
  overflow: visible;
}

.compose-section-reply[data-compose-keyboard="closed"] .compose-form {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
}

.compose-section-reply[data-compose-keyboard="closed"] .compose-form textarea {
  flex: 0 0 auto;
  height: auto;
  min-height: 5.6em;
  max-height: min(46vh, 320px);
}

.compose-section[data-compose-keyboard="open"] .compose-sheet-body {
  overflow-y: auto;
}

.compose-section[data-compose-keyboard="open"] .compose-form textarea {
  flex: 0 0 auto;
  height: auto;
  min-height: 5.6em;
  max-height: min(320px, var(--compose-editor-max-height, 320px));
}

.compose-form textarea::placeholder {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compose-quote-preview-wrap,
.compose-image-preview-wrap {
  width: 100%;
}

.compose-image-preview-wrap-pending {
  min-height: clamp(132px, 24vw, 220px);
}

.compose-image-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.compose-image-preview-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.compose-image-preview-count-2,
.compose-image-preview-count-3 {
  aspect-ratio: 3 / 2;
}

.compose-image-preview-count-2 .compose-image-preview-item,
.compose-image-preview-count-3 .compose-image-preview-item {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
}

.compose-image-preview-count-3 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.compose-image-preview-count-3 > .compose-image-preview-item:first-child {
  grid-row: 1 / span 2;
}

.compose-image-preview-count-1.compose-image-preview-grid-pending,
.compose-image-preview-count-1 .compose-image-preview-item {
  min-height: clamp(168px, 32vw, 280px);
}

.compose-image-preview-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: zoom-in;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: clamp(132px, 24vw, 220px);
}

.compose-image-preview-item-video {
  cursor: pointer;
}

.compose-image-preview-item-croppable {
  cursor: pointer;
}

.compose-image-preview-item-video .compose-image-preview,
.compose-image-preview-item-video .compose-video-loading,
.compose-image-preview-item-video .compose-video-no-thumb,
.compose-image-preview-item-croppable .compose-image-preview {
  cursor: pointer;
}

.compose-image-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compose-video-edit-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  color: #fff;
  pointer-events: none;
}

.compose-video-edit-icon {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.compose-image-crop-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  color: #fff;
  pointer-events: none;
}

.compose-image-crop-icon {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.compose-image-preview-item-video:hover .compose-video-edit-overlay {
  background: rgba(0, 0, 0, 0.58);
}

.compose-image-preview-item-video:hover .compose-video-edit-overlay,
.compose-image-preview-item-video:focus-within .compose-video-edit-overlay,
.compose-image-preview-item-croppable:hover .compose-image-crop-overlay,
.compose-image-preview-item-croppable:focus-within .compose-image-crop-overlay {
  background: rgba(0, 0, 0, 0.58);
  transform: translateY(-1px);
}

.compose-image-preview-item-video:active .compose-video-edit-overlay,
.compose-image-preview-item-croppable:active .compose-image-crop-overlay {
  transform: translateY(0);
}

.compose-video-no-thumb {
  width: 100%;
  height: 100%;
  background: #111;
}

.compose-video-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #111;
}
.compose-video-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: compose-video-spin 0.7s linear infinite;
}
@keyframes compose-video-spin {
  to { transform: rotate(360deg); }
}

.compose-image-preview-item-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background:
    linear-gradient(135deg, rgba(15, 20, 25, 0.04), rgba(15, 20, 25, 0.08)),
    var(--bg-secondary);
}

.compose-music-preview-wrap {
  width: 100%;
}

.repost-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 60;
}

.repost-picker-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.repost-picker-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px max(16px, var(--safe-area-bottom, 0px));
  transform: translateY(calc(100% + 56px));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 61;
}

.repost-picker-section.open {
  transform: translateY(0);
  pointer-events: auto;
}

.repost-picker-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: #d8dde2;
  margin: 0 auto 10px;
}

.repost-picker-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 18px;
}

.repost-picker-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 18px 6px;
}

.repost-picker-header.cast-timeline-reason-sheet-header {
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3) var(--s1);
}
.cast-timeline-reason-sheet-header h2 {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.35;
}

.repost-picker-section::before {
  content: "";
  position: absolute;
  inset: 0 16px 0 16px;
  border-radius: 24px 24px 20px 20px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1);
  border: 1px solid var(--border);
  z-index: -1;
}


.repost-picker-close-btn,
.repost-picker-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.repost-picker-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text);
}

.repost-picker-close-btn:hover {
  background: var(--bg-hover);
}

/* タイムライン表示設定は既存のリポストピッカー面をそのまま使う。
   見出しとハンドルは固定し、長くなった場合も本文だけをスクロールさせる。 */
.timeline-filter-sheet-header {
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}

.timeline-filter-sheet-title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.timeline-filter-sheet-body {
  gap: 0;
  max-height: calc(100dvh - 98px - max(16px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.timeline-filter-scope,
.timeline-filter-storage-note,
.timeline-filter-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.timeline-filter-scope {
  padding: 2px 0 16px;
}

.timeline-filter-group {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.timeline-filter-group-title {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.timeline-filter-radio-group {
  display: flex;
  flex-direction: column;
}

.timeline-filter-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  color: var(--text);
  text-align: left;
}

.timeline-filter-radio:hover,
.timeline-filter-switch:hover {
  color: var(--primary);
}

.timeline-filter-radio-mark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid var(--text-secondary);
  border-radius: 50%;
}

.timeline-filter-radio[aria-checked="true"] .timeline-filter-radio-mark {
  border-color: var(--primary);
}

.timeline-filter-radio[aria-checked="true"] .timeline-filter-radio-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--primary);
}

.timeline-filter-description {
  padding: 4px 2px 0 34px;
}

.timeline-filter-description > span,
.timeline-filter-storage-note > span {
  display: block;
}

.timeline-filter-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.timeline-filter-switch-label {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.timeline-filter-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px 0 8px;
}

.timeline-filter-switch-state {
  min-width: 24px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.timeline-filter-storage-note {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.timeline-filter-error-state p {
  margin: 0 0 12px;
}

.timeline-filter-retry {
  min-height: 40px;
  padding: 4px 12px;
  color: var(--primary);
  font-weight: 700;
}

.repost-picker-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}

.repost-picker-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: color var(--transition), opacity var(--transition), transform var(--transition);
}

.repost-picker-action:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-1px);
}

.repost-picker-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  color: currentColor;
  font-size: 18px;
  flex-shrink: 0;
}

.repost-picker-action-icon .icon {
  width: 18px;
  height: 18px;
}

.repost-picker-action-icon .fa-solid {
  font-size: 16px;
}

.repost-picker-action-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.repost-picker-action-copy strong {
  font-size: 16px;
  font-weight: 700;
}

.repost-picker-cancel-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--bg-hover);
  color: var(--text);
  font-weight: 700;
}

.compose-image-remove-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 18px;
}

.compose-footer {
  flex-shrink: 0;
  padding: 0 28px max(12px, var(--safe-area-bottom));
  background: var(--bg);
  display: flex;
  /* 通常は .compose-actions 1枚だけ。設定「自分の投稿のメディアをすべてセンシティブ指定する」
     ON時だけ、その上に注記（#compose-sensitive-forced-note）が積まれる（2026-08-09）。 */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* 設定によるセンシティブ強制の注記（2026-08-09）。既定は hidden 属性で非表示。 */
.compose-sensitive-forced-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.compose-section[data-compose-keyboard="closed"] .compose-footer {
  margin-top: 0;
}

.compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-height: var(--compose-dock-height);
  margin: 0;
  padding: 12px 0 0;
  background: transparent;
}

.compose-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.compose-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  transition: background var(--transition), opacity var(--transition);
}

.compose-tool-btn .icon {
  width: 20px;
  height: 20px;
}

.compose-tool-btn:hover {
  background: rgba(15, 20, 25, 0.16);
}

.compose-spoiler-btn {
  position: relative;
}

.compose-spoiler-btn.active {
  background: linear-gradient(135deg, #00ba7c, #0f9f6e);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 186, 124, 0.2);
}

.compose-spoiler-btn.active::after {
  content: "ON";
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 1px 5px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.compose-sensitive-btn {
  position: relative;
}

.compose-sensitive-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.compose-sensitive-btn.active::after {
  content: "ON";
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 1px 5px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.compose-tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compose-music-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.compose-music-card.is-busy {
  opacity: 0.7;
}

.compose-music-card .music-attachment-card {
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
}

.compose-music-card .music-preview-btn {
  grid-column: 3 / 4;
  grid-row: 1;
}

.compose-music-card .music-remove-btn {
  grid-column: 4 / 5;
  grid-row: 1;
}

.music-attachment-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  cursor: default;
}

.music-attachment-art,
.music-attachment-art-fallback {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--bg-tertiary);
  color: var(--primary);
}

.music-attachment-info {
  min-width: 0;
}

.music-attachment-card[data-track-url] {
  cursor: pointer;
}

.quoted-post-shell {
  position: relative;
  margin-top: 10px;
}

.quoted-post-shell-compact {
  margin-top: 0;
}

.compose-quoted-post-shell .quoted-post-card {
  pointer-events: none;
}

.compose-quoted-post-shell .post-body-wrap-compact.is-collapsed .post-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.quoted-post-card {
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg);
  padding: 12px 14px;
  overflow: hidden;
}

.quoted-post-shell.is-disabled .quoted-post-card {
  opacity: 0.72;
}

.quoted-post-card .post-media-wrap {
  margin-top: 10px;
}

.quoted-post-card .post-music-wrap {
  margin-top: 10px;
}

.quoted-post-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.quoted-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.quoted-post-author {
  color: var(--text);
}

.quoted-post-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 18px;
  pointer-events: auto;
}

.music-attachment-name,
.music-search-result-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-attachment-artist,
.music-search-result-artist {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-attachment-album,
.music-search-result-album {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-attachment-credit {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-tertiary);
  min-width: 0;
}

.music-attachment-credit-link {
  color: var(--text-secondary);
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-attachment-credit-note {
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-preview-btn,
.music-remove-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  position: relative;
  z-index: 3;
  touch-action: manipulation;
}

.music-preview-btn.playing {
  color: var(--primary);
  border-color: var(--primary);
}

.post-music-wrap {
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.music-search-card {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 24px;
  padding: 16px;
}

.music-search-lead {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
}

.music-search-form {
  display: block;
}

.music-search-input {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
}

.music-search-results {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-search-load-more {
  padding: 14px 12px 6px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.music-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.music-search-result-select {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  text-align: left;
}

.music-search-result.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.music-search-result-preview {
  flex: 0 0 auto;
}

.music-search-result-art,
.music-search-result-art-fallback {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--bg-tertiary);
}

.music-search-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-secondary);
}

.music-search-empty.is-error {
  color: #b3261e;
}

.search-page {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  height: calc(100dvh - var(--main-header-height) - var(--app-bottom-offset));
  max-height: calc(100dvh - var(--main-header-height) - var(--app-bottom-offset));
  background: var(--bg);
  overflow: hidden;
}

.search-page-form-wrap {
  display: none;
}

.search-page-form-wrap {
  display: none;
}

.search-page-form-wrap {
  display: none;
}

/* 2026-08-03: 親の .profile-tabs が grid→flex になり grid-template-columns は無効に
   なったため削除。2等分は .profile-tabs .profile-tab の flex:1 1 0 が担う
   （このルールに gap 等のgrid前提の宣言は他に無い）。 */
.search-tabs {
  position: relative;
  z-index: 1;
  margin-top: 0;
  flex: 0 0 auto;
}

.search-results {
  min-height: 0;
  flex: 1 1 auto;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.search-empty.is-error {
  color: #b3261e;
}

.search-user-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.search-user-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--post-divider);
  border-radius: 0;
  background: var(--bg);
  text-align: left;
  transition: background var(--transition);
}

.search-user-card:hover {
  background: var(--bg-hover);
}

.search-user-card:active {
  background: var(--bg-hover);
}

.search-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.search-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-user-avatar .avatar-icon {
  width: 30px;
  height: 30px;
}

.search-user-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-user-name,
.search-user-id,
.search-user-bio {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-user-name {
  white-space: nowrap;
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
}

.search-user-id {
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 13px;
}

.search-user-bio {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 700px) {
  .music-attachment-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .music-remove-btn {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  .compose-music-card .music-attachment-card {
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
  }

  .compose-music-card .music-preview-btn {
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .compose-music-card .music-remove-btn {
    grid-column: 4 / 5;
    grid-row: 1;
  }
}

.compose-tool-btn .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.char-counter {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===================================================================
   Status / banner buttons
   =================================================================== */

.status-banner {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.status-banner.error {
  background: rgba(244, 33, 46, 0.08);
  color: var(--danger);
}

.status-banner.success {
  background: rgba(0, 186, 124, 0.08);
  color: var(--success);
}

.link-banner {
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #333;
  background: #f0f7ff;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.link-banner-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #4285F4;
}
.link-banner-body {
  flex: 1;
  min-width: 0;
}
.link-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 16px;
  color: #888;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
}
.link-banner-dismiss:hover {
  color: #333;
  background: rgba(0,0,0,0.06);
}

/* ダークテーマ（2026-07-31）。ライトの淡い青地(#f0f7ff)+#333文字を素のまま使うと、
   中の .ghost-button だけが var(--text)=白のため白地に白文字で潰れていた。
   青みは残したまま地を暗くし、文字はテーマ変数に戻す。 */
:root[data-theme="dark"] .link-banner {
  background: #0d1a26;
  color: var(--text);
}
:root[data-theme="dark"] .link-banner-dismiss:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}

.guest-timeline-cta {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.guest-timeline-cta-link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 新規ユーザー向け「ようこそカード+チェックリスト」。他のフラットなリスト系
   (post-item 等)に合わせ、角丸なしの罫線区切りにする。 */
.onboarding-card {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* Stage 5 registration sheet. It reuses the app surface/text colors and spacing scale. */
.onboarding-entry-overlay[hidden] { display: none; }
.onboarding-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(0, 0, 0, 0.56);
}
.onboarding-entry-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: min(100%, 420px);
  max-height: min(88dvh, 760px);
  overflow: auto;
  padding: var(--s5) var(--s4) var(--s4);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}
.onboarding-entry-sheet h2 { margin: 0; padding-inline-end: 34px; font-size: 19px; line-height: 1.4; }
.onboarding-entry-description { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.onboarding-entry-handoff-warning { margin: 0; padding: var(--s3); border-radius: 8px; background: var(--surface-muted, #f2f4f5); color: var(--text); line-height: 1.55; }
.onboarding-entry-handoff-warning[hidden] { display: none; }
.onboarding-entry-close {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-end: var(--s3);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.onboarding-entry-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.onboarding-entry-google,
.onboarding-entry-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--notif-reply);
  border-radius: 999px;
  background: var(--notif-reply);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.onboarding-entry-google[hidden], .onboarding-entry-login[hidden], .onboarding-entry-webview[hidden], .onboarding-entry-policy[hidden] { display: none; }
.onboarding-entry-google-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; background: white; }
.onboarding-entry-login { align-self: center; color: var(--text); text-underline-offset: 3px; padding: var(--s2); }
.onboarding-entry-policy { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.onboarding-entry-policy a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.onboarding-entry-webview p { margin: 0 0 var(--s3); line-height: 1.6; }
.onboarding-entry-webview .onboarding-entry-copy-status { min-height: 1.4em; margin: var(--s2) 0 0; font-size: 13px; color: var(--text-secondary); }
.onboarding-entry-error { margin: 0; color: var(--danger); font-size: 13px; }
.onboarding-entry-copy-buffer { position: fixed; inset-inline-start: -10000px; }
body.onboarding-entry-open { overflow: hidden; }
.onboarding-handle-return-note { margin: 0 0 var(--s2); color: #3a4248; font-size: 13px; line-height: 1.55; text-align: center; }
html.onboarding-v2-handle-form .auth-page { min-height: 100dvh; overflow-y: auto; }
html.onboarding-v2-handle-form .auth-card { margin-top: var(--s5); }
html.onboarding-v2-handle-form .auth-submit { position: static; z-index: auto; box-shadow: none; background: #1d9bf0; border-color: #1d9bf0; color: #fff; }
html.onboarding-v2-handle-form .auth-submit:hover { background: #1688d4; }
html.onboarding-v2-handle-form .auth-field input:focus,
html.onboarding-v2-handle-form .auth-birthdate-selects select:focus { border-bottom-color: #1d9bf0; }
@media (max-width: 640px) {
  .onboarding-entry-overlay { align-items: flex-end; padding: 0; }
  .onboarding-entry-sheet {
    width: 100%;
    max-height: min(88dvh, 760px);
    padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
  }
}
/* キャストホーム埋め込み版（2026-08-17）。撤去した.cast-home-unlock-bannerの寸法を
   そのまま継承する（既存の寸法・部品を流用し独自サイズを発明しない）。全幅+下線区切りの
   タイムライン版(.onboarding-card単体)とは違い、周囲のキャストカード群と同じカード体裁にする。
   borderショートハンドが.onboarding-cardのborder-bottomより優先されるのは、このセレクタの
   詳細度(2クラス)が上回るため。 */
.onboarding-card.is-cast-variant {
  margin: var(--s1) var(--s3) var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border-card);
  border-radius: 12px;
}
.onboarding-card.onboarding-v2-card { padding: var(--s4); }
.onboarding-card.is-cast-variant.onboarding-v2-card { margin: var(--s2) var(--s3); }
.onboarding-v2-card .onboarding-card-head { gap: var(--s2); }
.onboarding-v2-card .onboarding-card-close { padding: var(--s1); }
.onboarding-v2-card .onboarding-card-body { margin: var(--s1) 0 var(--s2); }
.onboarding-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}
.onboarding-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.onboarding-card-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 4px;
}
.onboarding-card-close:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.onboarding-card-body {
  margin: var(--s2) 0 var(--s3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.onboarding-card-next-action {
  min-height: 42px;
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cast-anonymous-header .cast-header-left { display: flex; align-items: center; gap: var(--s3); }
.cast-anonymous-header .cast-header-left strong { color: var(--text); font-size: 15px; }
.cast-anonymous-header .cast-header-back-btn { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text); }
.cast-anonymous-header .cast-header-back-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cast-anonymous-header .cast-header-right { display: flex; align-items: center; gap: var(--s3); }
.cast-anonymous-login { color: var(--text); text-decoration: none; font-size: 13px; }
.cast-anonymous-signup { padding: var(--s2) var(--s3); border-radius: 999px; background: #1d9bf0; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
.cast-anonymous-directory { padding: var(--s4); }
.cast-anonymous-directory h1 { margin: 0 0 var(--s2); color: var(--text); font-size: 20px; line-height: 1.4; }
.cast-anonymous-directory > p { margin: 0 0 var(--s4); color: var(--text-secondary); line-height: 1.55; }
.onboarding-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.onboarding-card-item-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.onboarding-card-item-btn:hover {
  background: var(--bg-hover);
}
.onboarding-card-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--text-soft);
  color: var(--text);
  font-size: 10px;
}
.onboarding-card-item.is-done .onboarding-card-item-btn {
  color: var(--text-soft);
  border-color: var(--border);
}
.onboarding-card-item.is-done .onboarding-card-item-label {
  text-decoration: line-through;
}
.onboarding-card-item.is-done .onboarding-card-check {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
/* ①未達成のあいだ②③を薄く見せる（押せるが「いまやることではない」表現。2026-08-17）。
   is-doneとは別プロパティ(opacity)で表現し、達成済み(取り消し線+黒塗りチェック)と
   混同しないようにする。両方付く（薄い状態のまま既に達成済み）ことは起こり得る。 */
.onboarding-card-item.is-muted .onboarding-card-item-btn {
  opacity: 0.5;
}
.onboarding-card-foot {
  margin: var(--s2) 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.onboarding-card-back-btn {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--cast-ink, var(--text));
  border-radius: 10px;
  background: none;
  color: var(--cast-ink, var(--text));
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* 投稿の入口を指すコーチマーク（2026-08-17）。オンボードカード②「Zetterに投稿してみる」を
   押したときだけ出す。body直付けのfixed要素として重ねるだけで、投稿UI側のHTMLは変更しない。
   矢印＋吹き出しの見た目と pointer-events:none による非干渉の作りは PR #502（世界切替
   コーチマーク）から流用。#502は対象が常にヘッダー＝真下に置いて上向き矢印だけで足りたが、
   こちらは右下のFABを「上から下向きに」指す必要があるため is-above を足してある。 */
.compose-coachmark {
  position: fixed;
  z-index: 45; /* FAB(40)・ヘッダー(20)より上、world-switch-overlay(9999)より下 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 指している投稿ボタンをそのまま押せるようにする。閉じるボタンは置かない
     （タップ・スクロール・時間経過で消えるため、押す場所を増やさない） */
  pointer-events: none;
  max-width: min(240px, calc(100vw - 16px));
}

/* 対象の上に置くとき（右下のFAB）。吹き出しが先、矢印が後ろ＝下向き。 */
.compose-coachmark.is-above {
  flex-direction: column-reverse;
}

.compose-coachmark-arrow {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 14px solid var(--text);
  margin-bottom: 2px;
}

.compose-coachmark.is-above .compose-coachmark-arrow {
  border-bottom: 0;
  border-top: 14px solid var(--text);
  margin-bottom: 0;
  margin-top: 2px;
}

.compose-coachmark-arrow.is-animated {
  animation: compose-coachmark-bob 1.1s ease-in-out infinite;
}

.compose-coachmark.is-above .compose-coachmark-arrow.is-animated {
  animation-name: compose-coachmark-bob-down;
}

.compose-coachmark-bubble {
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.28);
}

.compose-coachmark-text {
  margin: 0;
}

@keyframes compose-coachmark-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes compose-coachmark-bob-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .compose-coachmark-arrow,
  .compose-coachmark-arrow.is-animated {
    animation: none;
  }
}

.push-prompt-card {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.push-prompt-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.push-prompt-card-body {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.push-prompt-card-actions {
  display: flex;
  gap: 8px;
}
.push-ios-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.loading-state,
.loading-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-state {
  width: 100%;
  min-height: 48px;
}

.initial-loading-state {
  position: fixed;
  inset: 0;
  z-index: 30;
  min-height: 100dvh;
  pointer-events: none;
}

.loading-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.125em;
  border: 0.18em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--primary);
  animation: loading-spinner-border 0.75s linear infinite;
}

.loading-spinner-sm {
  width: 1.1rem;
  height: 1.1rem;
  border-width: 0.16em;
}

@keyframes loading-spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.ptr-indicator {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-overlay);
  /* 外枠は付けない。スピナー(.loading-spinner)自体のリングだけを見せ、
     引っ張り中も読み込み中も同じ1本リングで統一する（黒い縁の出入りを無くす）。 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  transition: none;
}

/* ===================================================================
   Feed / Timeline
   =================================================================== */

.feed-view {
  /* no padding — posts go edge-to-edge */
}

#profile-edit-view {
  height: calc(100dvh - var(--main-header-height) - var(--app-bottom-offset));
  overflow: hidden;
}

.feed-list {
  /* container for post/notification items */
}

.timeline-new-posts-bar {
  position: sticky;
  top: var(--main-header-height);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: background var(--transition), opacity var(--transition);
}

.timeline-new-posts-bar:hover {
  background: var(--bg-hover);
}

.timeline-new-posts-bar:disabled {
  opacity: 0.7;
  cursor: default;
}

.timeline-new-posts-bar-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.load-more-btn {
  display: block;
  width: 100%;
  padding: 16px;
  text-align: center;
  font-size: 15px;
  color: var(--accent);
  transition: background var(--transition);
}

.load-more-btn:hover {
  background: var(--accent-soft);
}

/* ===================================================================
   Repost label (above post-item)
   =================================================================== */

.repost-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 0 68px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.repost-label .icon {
  width: 14px;
  height: 14px;
  fill: var(--text-secondary);
}

/* 色付き(盛り上がり)投稿がリポストされたとき、リポストラベルにも下のカードと
   同じ色帯を連続させる。ラベルは帯の上端、直下の .post-item が続きを描く。 */
.repost-label.level-hot {
  background:
    linear-gradient(90deg, rgba(249, 24, 128, 0.26), rgba(249, 24, 128, 0.1) 56%, transparent 84%);
  box-shadow: inset 5px 0 0 rgba(249, 24, 128, 0.9);
}

.repost-label.level-legendary {
  background:
    linear-gradient(90deg, rgba(255, 196, 0, 0.32), rgba(249, 24, 128, 0.18) 45%, rgba(255, 255, 255, 0) 88%);
  box-shadow: inset 6px 0 0 rgba(255, 196, 0, 0.95);
}

/* ===================================================================
   Post item — flex layout: avatar left + content right
   =================================================================== */

.post-item {
  display: flex;
  gap: 12px;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--post-divider);

  transition: background var(--transition);
}

.post-item > .avatar-link {
  align-self: flex-start;
  margin-top: 6px;
}

.post-item:hover {
  background: var(--bg-hover);
}

.topic-row.tagline-a {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--s1);
  min-height: var(--s4);
  margin: -4px 0 2px;
}

.topic-row .topic-display {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  gap: var(--s1);
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--post-topic-color);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
}

.topic-row .topic-sticker {
  flex: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 6px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.topic-row .topic-display svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic-row .topic-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* タップして詳細へ遷移するときだけ、一瞬グレーアウトして「効いた」を伝える。
   スクロール/スワイプ(遷移しない)時は付与されないので光らない。
   heat 投稿の上でも視認できるよう、半透明の暗オーバーレイで重ねる。 */
.post-item.is-tapping {
  background-color: rgba(15, 20, 25, 0.08);
  background-blend-mode: multiply;
}
:root[data-theme="dark"] .post-item.is-tapping {
  background-color: rgba(255, 255, 255, 0.10);
}

.post-item.level-hot {
  background:
    linear-gradient(90deg, rgba(249, 24, 128, 0.26), rgba(249, 24, 128, 0.1) 56%, transparent 84%);
  box-shadow: inset 5px 0 0 rgba(249, 24, 128, 0.9), inset 0 0 0 1px rgba(249, 24, 128, 0.18);
}

.post-item.level-legendary {
  background:
    linear-gradient(90deg, rgba(255, 196, 0, 0.32), rgba(249, 24, 128, 0.18) 45%, rgba(255, 255, 255, 0) 88%);
  box-shadow:
    inset 6px 0 0 rgba(255, 196, 0, 0.95),
    inset 0 0 0 1px rgba(255, 196, 0, 0.28),
    0 0 0 1px rgba(249, 24, 128, 0.12);
}

.post-item.level-hot:hover,
.post-item.level-legendary:hover {
  filter: saturate(1.08) brightness(1.01);
}

/* ===== Zetter共通の虹色（2026-08-13 共通部品化） =====
   初投稿カード（.is-first-post）とキャストの「思考」中インジケータで同じ虹を使うため、
   色の正本をここ1箇所に置く。従来は同じ8ストップを3箇所に literal で重複させていた
   （通常 / level-hot / level-legendary）。**値は従来と1つも変えていない**
   （rgb(R G B / A) は rgba(R, G, B, A) と同じ計算色にシリアライズされる）。
   --zetter-rainbow-alpha は使う側で上書きできる: 初投稿カードは背景なので薄い 0.24、
   思考インジケータは小さく目立たせたいので濃い値を各自で指定する。 */
:root {
  --zetter-rainbow-r1: 255 59 48;
  --zetter-rainbow-r2: 255 149 0;
  --zetter-rainbow-r3: 255 204 0;
  --zetter-rainbow-r4: 52 199 89;
  --zetter-rainbow-r5: 0 199 190;
  --zetter-rainbow-r6: 0 122 255;
  --zetter-rainbow-r7: 175 82 222;
  --zetter-rainbow-alpha: 0.24;
  --zetter-rainbow-gradient: linear-gradient(
    90deg,
    rgb(var(--zetter-rainbow-r1) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r2) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r3) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r4) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r5) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r6) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r7) / var(--zetter-rainbow-alpha)),
    rgb(var(--zetter-rainbow-r1) / var(--zetter-rainbow-alpha))
  );
}

/* 初投稿（isFirstPost）カード。level-hot/level-legendary とは独立したクラスで、
   同時に付いても崩れないよう自身の background/box-shadow だけを重ねる。
   ::before の光の帯は z-index:-1 で自身の背景より前・投稿本文より後ろに固定
   （このスタッキングコンテキストの外に出ないよう position+z-index を明示）。
   引用投稿プレビュー（.quoted-post-card）にも同じ演出を出すため、セレクタに併記する。 */
.post-item.is-first-post,
.quoted-post-card.is-first-post {
  position: relative;
  z-index: 0;
  background:
    var(--zetter-rainbow-gradient);
  background-size: 400% 100%;
  animation: first-post-rainbow-flow 5s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(15, 20, 25, 0.16);
}

:root[data-theme="dark"] .post-item.is-first-post,
:root[data-theme="dark"] .quoted-post-card.is-first-post {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.post-item.is-first-post::before,
.quoted-post-card.is-first-post::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.7) 32%, transparent 44%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: first-post-sparkle-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

.post-item.is-first-post:hover,
.quoted-post-card.is-first-post:hover {
  filter: saturate(1.08) brightness(1.01);
}

/* is-first-post が level-hot/level-legendary と同時に付くレアケース（初投稿かつ
   相対いいね数上位）。heat側の色付きストライプ box-shadow を優先して残しつつ、
   background-image の2レイヤーで heat のグラデーションと虹色を重ねて見せる。
   1レイヤー目（heat/legendary）は静止、2レイヤー目（虹色）だけアニメーションさせるため
   専用の @keyframes（2レイヤー分の background-position）を使う。 */
.post-item.is-first-post.level-hot {
  background-image:
    linear-gradient(90deg, rgba(249, 24, 128, 0.26), rgba(249, 24, 128, 0.1) 56%, transparent 84%),
    var(--zetter-rainbow-gradient);
  background-size: 100% 100%, 400% 100%;
  animation: first-post-rainbow-flow-layered 5s linear infinite;
  box-shadow: inset 5px 0 0 rgba(249, 24, 128, 0.9), inset 0 0 0 1px rgba(249, 24, 128, 0.18);
}

.post-item.is-first-post.level-legendary {
  background-image:
    linear-gradient(90deg, rgba(255, 196, 0, 0.32), rgba(249, 24, 128, 0.18) 45%, rgba(255, 255, 255, 0) 88%),
    var(--zetter-rainbow-gradient);
  background-size: 100% 100%, 400% 100%;
  animation: first-post-rainbow-flow-layered 5s linear infinite;
  box-shadow:
    inset 6px 0 0 rgba(255, 196, 0, 0.95),
    inset 0 0 0 1px rgba(255, 196, 0, 0.28),
    0 0 0 1px rgba(249, 24, 128, 0.12);
}

/* :root[data-theme="dark"] .post-item.is-first-post の box-shadow 上書き
   （specificity 0,4,0）が combo ルール（0,3,0）より勝ってしまうため、
   ダークモードでも heat/legendary 側の box-shadow を維持するために明示する。 */
:root[data-theme="dark"] .post-item.is-first-post.level-hot {
  box-shadow: inset 5px 0 0 rgba(249, 24, 128, 0.9), inset 0 0 0 1px rgba(249, 24, 128, 0.18);
}

:root[data-theme="dark"] .post-item.is-first-post.level-legendary {
  box-shadow:
    inset 6px 0 0 rgba(255, 196, 0, 0.95),
    inset 0 0 0 1px rgba(255, 196, 0, 0.28),
    0 0 0 1px rgba(249, 24, 128, 0.12);
}

@keyframes first-post-rainbow-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes first-post-rainbow-flow-layered {
  0% { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, 400% 50%; }
}

@keyframes first-post-sparkle-sweep {
  0%, 55%, 100% { background-position: -120% 0; }
  25% { background-position: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .post-item.is-first-post,
  .post-item.is-first-post::before,
  .quoted-post-card.is-first-post,
  .quoted-post-card.is-first-post::before,
  .post-item.is-first-post.level-hot,
  .post-item.is-first-post.level-legendary {
    animation: none;
  }
}

/* ===================================================================
   プロモーションカードv2 PR C（docs/promotion-cards-v2-design.md 2章）。
   .post-item と同じ横幅・余白・フォント・トークンを流用する（新しい見た目を発明しない）。
   avatar列が無い分 .post-item のgapは効かないが、padding/border-bottomはそのまま共有する。
   =================================================================== */

.promotion-card {
  cursor: default;
}

.promotion-card:hover {
  background: none;
}

.promotion-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.promotion-card-meta {
  flex-wrap: nowrap;
}

.promotion-card-brand strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.promotion-card-badge {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* 実機不具合(オーナー確認): 固定aspect-ratio(16/9)+object-fit:coverだと1:1のクリエイティブの
   上下がトリミングされる(「月500円で」の行が切れて見えなくなった)。既存の.ogp-card-img img
   (トリミングなしで実比率のまま全体表示する唯一の流儀)に合わせ、幅100%・高さautoを基本にし、
   固定aspect-ratioは持たない。トリミングは一切発生しない。
   管理画面プレビュー(src/pages.ts の .promo-preview-image)と意図的に完全に一致させている
   (プレビューの目的は実配信と同じ見え方の確認のため)。どちらか片方だけを変更すると
   プレビューが実配信と食い違う不具合になる。変更する場合は必ず両方同時に直すこと。 */
.promotion-card-media {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
}

.promotion-card-media img {
  display: block;
  width: 100%;
  height: auto;
  /* 極端に縦長の画像がフィードを占有しないための上限のみ(1:1・16:9はどちらもこの値より
     十分低いので影響を受けない)。既存の.ogp-card-img img(min(70vh, 560px))と同じ書式に
     揃え、小画面でも画面を占有しすぎないようにvh基準を加える。640pxはこのCSS内で本文
     カラム幅として既に複数箇所で使われている既存の定数(例: 165行目付近の.timeline-list系)を
     流用し、新しい値を発明しない。上限を超える場合だけobject-fit:containで(幅100%は
     保ったまま)収める。 */
  max-height: min(70vh, 640px);
  object-fit: contain;
  /* 要望1: 画像タップもCTAと同じ遷移になった(data-action="promotion-cta"をhandlePromotionCtaClick
     が処理する、既存のCTAボタンと共通のロジック)。押せることが分かるようポインタカーソルにする。 */
  cursor: pointer;
}

.promotion-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.promotion-card-headline {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.promotion-card-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.promotion-card-cta {
  align-self: flex-start;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.08);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.post-item.level-hot .level-badge {
  background: rgba(249, 24, 128, 0.14);
  color: var(--like);
}

.post-edited-label {
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-pinned-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-pinned-label .fa-thumbtack {
  font-size: 11px;
}

#profile-pinned:empty {
  display: none;
}

.post-item.level-legendary .level-badge {
  background: rgba(255, 196, 0, 0.2);
  color: #8a5a00;
}

.post-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.quoted-post-type-badge {
  margin-left: 2px;
}

/* Post content column */
.post-content {
  flex: 1;
  min-width: 0;
}

/* Post meta — name, @handle, time */
.post-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.3;
}

/* identity block: shrinks first, ID before display name */
.post-meta-identity {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

.post-meta strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 2;
  min-width: 0;
}

.display-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.post-meta strong .display-name-text {
  color: var(--text);
}

.post-meta-userid {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 3;
  min-width: 0;
}

/* · time 編集済み 3点リーダー: never shrink */
.post-meta > span:not(.post-meta-identity),
.post-meta time,
.post-meta .post-edited-label,
.post-meta .inline-action-menu {
  flex-shrink: 0;
}

.post-meta span:not(.post-meta-identity):not(.post-meta-userid):not(.post-edited-label):not(.display-name-text):not(.first-post-chip):not(.first-post-chip-icon):not(.first-post-chip-label) {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.post-meta time {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.inline-action-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.post-meta .inline-action-menu {
  margin-left: auto;
}

.menu-toggle-btn {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  border-radius: 999px;
}

.menu-toggle-btn {
  color: var(--text-secondary);
}

.post-menu-toggle-btn,
.comment-menu-toggle-btn {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  min-height: 32px;
  padding-inline: 0;
}

.post-menu-toggle-btn .icon,
.comment-menu-toggle-btn .icon,
.post-menu-toggle-btn .fa-ellipsis-vertical,
.comment-menu-toggle-btn .fa-ellipsis-vertical {
  width: 18px;
}

/* 「この投稿についてZYNと話す」Zボタン — post-meta 行内、⋯メニューの左隣。
   ラッパー/ボタンとも隣の .inline-action-menu / .post-menu-toggle-btn と同格に揃える。
   （ラッパーに .inline-action-menu クラスを使うと patchPostItem のメニュー差し替えが
   誤爆するため、専用クラスで同じ見た目を再現している） */
.zyn-meta-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.post-meta .zyn-meta-wrap {
  margin-left: auto;
  flex-shrink: 0;
}

/* Z ボタンがあるときは ⋯ メニュー側の margin-left: auto を無効化して隣接させる */
.post-meta .zyn-meta-wrap ~ .inline-action-menu {
  margin-left: 0;
}

.zyn-meta-btn {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  min-height: 32px;
  padding-inline: 0;
}

.zyn-meta-btn .icon-zyn-mark {
  width: 16px;
  height: 16px;
}

/* ゼロ幅スペースのベースラインアンカー。post-meta の baseline 整列で
   SVG（下端が基準になる）ではなく隣の ⋯（Font Awesome, line-height:1）と
   同じテキストベースラインを Z ボタンに与えるためのもの */
.zyn-meta-btn .zyn-meta-baseline {
  line-height: 1;
}

.menu-toggle-btn:hover,
.inline-action-menu.is-open .menu-toggle-btn {
  background: var(--bg-hover);
  color: var(--text);
}

.menu-action-btn {
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 12px;
  border-color: transparent;
  border-radius: 0;
  color: var(--text);
  white-space: nowrap;
}

.menu-action-btn:hover {
  background: var(--bg-hover);
}

.menu-action-btn-danger,
.menu-action-btn-muted {
  color: var(--danger);
}

.menu-action-btn-danger:hover,
.menu-action-btn-muted:hover {
  background: rgba(244, 33, 46, 0.1);
  color: var(--danger);
}

.menu-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 60;
}

.action-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.action-sheet-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 max(0px, env(safe-area-inset-right)) max(12px, var(--safe-area-bottom, 0px)) max(0px, env(safe-area-inset-left));
  transform: translateY(calc(100% + 40px));
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 61;
}

.action-sheet-section.open {
  transform: translateY(0);
}

.action-sheet-section::before {
  content: "";
  position: absolute;
  inset: 0 16px 0 16px;
  border-radius: 24px 24px 20px 20px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1);
  border: 1px solid var(--border);
  z-index: -1;
}

.action-sheet-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 18px 6px;
}

.action-sheet-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text);
}

.action-sheet-close-btn:hover {
  background: var(--bg-hover);
}

.action-sheet-body {
  padding-top: 0;
}

.action-sheet-actions {
  gap: 14px;
}

.action-sheet-action {
  padding: 8px 0;
}

.action-sheet-action-danger,
.action-sheet-action-muted {
  color: var(--danger);
}

/* ZYNのキャラ設定シート（トップバー☺から開く。zeta-chat-sheet-* が外枠、これは中身のフィールド用） */
.zeta-chat-persona-settings-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, var(--text));
  opacity: 0.75;
}

.zeta-chat-persona-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zeta-chat-persona-settings-label {
  margin: 2px 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.zeta-chat-persona-settings-textarea {
  width: 100%;
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
}

.zeta-chat-persona-settings-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.zeta-chat-persona-settings-textarea:disabled {
  opacity: 0.6;
}

.zeta-chat-persona-settings-counter {
  align-self: flex-end;
  margin-top: -2px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* 指示付きリロールシート（2026-07-22）。ペルソナ設定と同じテキストエリア/カウンタの見た目。 */
.zeta-chat-reroll-label {
  display: block;
  margin: 0 4px 10px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-secondary);
}

.zeta-chat-reroll-textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
}

.zeta-chat-reroll-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.zeta-chat-reroll-textarea:disabled {
  opacity: 0.6;
}

.zeta-chat-reroll-counter {
  display: block;
  margin: 4px 4px 14px;
  text-align: right;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.zeta-chat-reroll-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.zeta-chat-reroll-cancel-btn,
.zeta-chat-reroll-confirm-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.zeta-chat-reroll-cancel-btn {
  background: transparent;
  color: var(--text-secondary);
}

.zeta-chat-reroll-cancel-btn:hover {
  color: var(--text);
}

.zeta-chat-reroll-confirm-btn {
  background: var(--text);
  color: var(--bg);
}

.zeta-chat-reroll-confirm-btn:disabled {
  opacity: 0.4;
}

/* 巻き戻し確認シート（要望ボード#19、2026-08-03）。選択肢はルーム操作と同じ
   zeta-chat-sheet-action の行リスト（塗りつぶし無し・左揃え・区切り線）を使う。
   危険側は赤枠ピルではなく zeta-chat-sheet-action-danger の赤文字だけで示す。 */
.zeta-chat-rewind-lead {
  /* シートタイトルと同じ重さにすると見出しが2つ並んで見えるので、本文の重さに落とす。 */
  margin: 0 6px;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-secondary);
}

.zeta-chat-rewind-excerpt {
  margin: 0 6px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.zeta-chat-rewind-actions {
  margin-top: 6px;
}

/* zeta-chat-sheet-action-copy は既定では1行のラベル用。ここでだけ副文を下に積む。 */
.zeta-chat-rewind-choice .zeta-chat-sheet-action-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zeta-chat-rewind-choice .zeta-chat-sheet-action-copy strong {
  font-size: 15px;
  font-weight: 600;
}

.zeta-chat-rewind-choice-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
}

.zeta-chat-rewind-choice .zeta-chat-sheet-action-icon svg {
  display: block;
  margin: 0 auto;
}

/* キャンセルは並びの中で最も弱く見せる（他2つと同じ行の作りは崩さない）。 */
.zeta-chat-rewind-cancel {
  color: var(--text-secondary);
}

/* 巻き戻しできる自分の発言（オーナー実機フィードバック 2026-08-03: アイコンバーを挟まず
   タップでそのまま確認シートを出す）。押せることが分かる最小の手掛かりだけを置き、
   バブルの見た目そのものは変えない。属性は features.messageRewind 有効時にしか付かない。 */
.zeta-chat-message.is-rewindable > .zeta-chat-bubble,
.zeta-chat-message.is-rewindable .cast-msg-persona-col > .zeta-chat-bubble {
  cursor: pointer;
}

/* 「ZYNの記憶を消す」危険操作ゾーン（キャラ設定シート最下部）。控えめな枠線区切り＋非塗りつぶしの
   赤テキストボタンとし、ヘッダーの保存✓アクションとは明確にトーンを分ける。 */
.zeta-chat-persona-settings-danger-zone {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.zeta-chat-persona-settings-danger-label {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, var(--text));
  opacity: 0.75;
}

.zeta-chat-persona-settings-reset-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  background: transparent;
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 600;
}

.zeta-chat-persona-settings-reset-btn:hover {
  background: rgba(244, 33, 46, 0.08);
}

.zeta-chat-persona-settings-reset-btn:disabled {
  opacity: 0.5;
}

.zeta-chat-persona-settings-reset-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zeta-chat-persona-settings-reset-confirm-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, var(--text));
}

.zeta-chat-persona-settings-reset-confirm-actions {
  display: flex;
  gap: 8px;
}

.zeta-chat-persona-settings-reset-cancel-btn,
.zeta-chat-persona-settings-reset-confirm-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.zeta-chat-persona-settings-reset-cancel-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.zeta-chat-persona-settings-reset-confirm-btn {
  border: 1px solid var(--danger);
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}

/* 「ZYNの記憶を見る」導線ボタン（キャラ設定シート内、記憶リセット危険ゾーンの手前） */
.zeta-chat-persona-settings-memory-view {
  margin-top: 14px;
}

.zeta-chat-persona-settings-view-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

.zeta-chat-persona-settings-view-btn:hover {
  border-color: var(--primary);
}

/* 「ZYNの記憶」read-only可視化パネルの中身 */
.zeta-chat-memory-view-section {
  margin-bottom: 16px;
}

.zeta-chat-memory-view-section:last-of-type {
  margin-bottom: 0;
}

.zeta-chat-memory-view-heading {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary, var(--text));
  opacity: 0.85;
}

.zeta-chat-memory-view-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.zeta-chat-memory-view-empty {
  margin: 8px 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
  opacity: 0.75;
  text-align: center;
}

.zeta-chat-persona-settings-reset-cancel-btn:disabled,
.zeta-chat-persona-settings-reset-confirm-btn:disabled {
  opacity: 0.6;
}

/* Post body */
.post-body {
  margin: -2px 0 8px;
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* タイムライン折り畳み: CSS line-clamp で実装。以前は clamp.js が JS で
   DOM のテキストノードを末尾から削っており、伏せ字 <button class="spoiler-text">
   が要素ごと removeChild される不具合があった (issue: 伏せ字と長文を同時に
   投稿するとタイムライン上で両方消える)。CSS なら DOM を壊さないので安全。 */
.post-body-wrap[data-post-body-id].is-collapsed .post-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  /* -webkit-line-clamp は子要素が単一の inline button（伏せ字単独投稿など）の
     場合に効かないことがある。font-size 15px × line-height 1.35 = 20.25px の
     6行ぶん（4行版は ×4）を max-height として併用し、必ず切り詰める。 */
  max-height: calc(15px * 1.35 * 6);
}
.post-body-wrap[data-post-body-id].post-body-wrap-compact.is-collapsed .post-body {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-height: calc(15px * 1.35 * 4);
}

/* タイムラインカード上のテキストはモバイル幅でのみ一律選択不可にする。
   モバイルで長押しによる勝手な範囲選択が走ると、その後の最初のタップが
   「選択解除」に消費されてボタンを1回踏み損ねる。タイムライン上では本文も
   表示名/userId/相対時刻/カウンタ等もコピー需要は薄いので、カード全体を
   none にする。投稿詳細ページの中心投稿 (.thread-post-item) は幅を問わず
   従来どおり選択可。
   PC幅（このメディアクエリ非該当時）はこの再制限自体が適用されないため、
   L106のベース解除 (user-select:text) がそのまま効いて本文コピーが可能になる。
   メディアクエリの条件は app.js の MOBILE_UI_MEDIA_QUERY およびL8354付近の
   レスポンシブブロックと同一にすること。
   注意: 既定で `p,span,h1-h6,time,label,...,.post-body,.notif-body` が
   user-select:text にされている(L106)ため、単に .post-item { none } では
   特異性で負ける。タイムライン配下のそれら子要素を直接 none に倒す。
   .notif-body は .notif-item 配下専用で .post-item 内には出現しないため
   対象から除外している（到達不能セレクタだったので削除）。 */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
  .post-item:not(.thread-post-item),
  .post-item:not(.thread-post-item) p,
  .post-item:not(.thread-post-item) span,
  .post-item:not(.thread-post-item) h1,
  .post-item:not(.thread-post-item) h2,
  .post-item:not(.thread-post-item) h3,
  .post-item:not(.thread-post-item) h4,
  .post-item:not(.thread-post-item) h5,
  .post-item:not(.thread-post-item) h6,
  .post-item:not(.thread-post-item) time,
  .post-item:not(.thread-post-item) label,
  .post-item:not(.thread-post-item) .post-body {
    -webkit-user-select: none;
    user-select: none;
  }
}

.spoiler-text {
  position: relative;
  display: inline;
  margin: 0;
  padding: 1px 5px 2px;
  border: 0;
  border-radius: 7px;
  background:
    linear-gradient(115deg, rgba(17, 24, 39, 0.96), rgba(75, 85, 99, 0.9), rgba(17, 24, 39, 0.96));
  background-size: 220% 100%;
  color: transparent;
  font: inherit;
  vertical-align: baseline;
  cursor: pointer;
  appearance: none;
  animation: spoiler-shimmer 1.8s ease-in-out infinite;
}

.spoiler-text::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 6px;
  opacity: 0.38;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 72%, rgba(255,255,255,0.18) 0 1px, transparent 2px);
  pointer-events: none;
}

.spoiler-text-content {
  filter: blur(5px);
  opacity: 0.42;
  transition: filter var(--transition), opacity var(--transition), color var(--transition);
}

.spoiler-text-static {
  pointer-events: none;
  cursor: inherit;
}

.spoiler-text-static .spoiler-text-content {
  color: rgba(255, 255, 255, 0.92);
}

.spoiler-text.is-revealed {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: default;
  animation: none;
}

.spoiler-text.is-revealed::after {
  opacity: 0;
}

.spoiler-text.is-revealed .spoiler-text-content {
  filter: blur(0);
  opacity: 1;
}

@keyframes spoiler-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .spoiler-text {
    animation: none;
  }
}

.post-body-expand-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: -2px 0 8px;
  padding: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  pointer-events: auto;
}

.post-body-expand-btn:hover {
  color: var(--primary-hover);
}

.post-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-link:hover {
  color: #1e40af;
}

.ogp-card,
.ogp-card-placeholder {
  margin: 8px 0 12px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: var(--bg);
}

/* キャラシェアカード（投稿本文の /cast/:id URLのカード表示、2026-07-18）。
   タップでopen-cast-detail委譲→SPA内でキャラ詳細へ。 */
.cast-share-card-placeholder {
  display: none;
}

.cast-share-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.cast-share-card:hover {
  border-color: var(--text-secondary);
}

.cast-share-card-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」）。中身は.avatar-icon（DEFAULT_AVATAR_SVG）に揃える。 */
.cast-share-card-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cfd9de;
}

.cast-share-card-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.cast-share-card-label {
  color: var(--text-secondary);
  font-size: 11px;
}

.cast-share-card-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-share-card-tagline {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-share-card-chevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 20px;
}

.ogp-card {
  display: block;
  overflow: hidden;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.ogp-card:hover {
  border-color: rgba(15, 20, 25, 0.28);
  background: var(--bg-hover);
}

.ogp-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.ogp-card-placeholder {
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.ogp-card-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: ogp-shimmer 1.4s ease-in-out infinite;
}

.ogp-card-img {
  width: 100%;
  min-width: 0;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}

.ogp-card-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 560px);
  object-fit: contain;
}

.ogp-card-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.ogp-card-domain {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
  word-break: break-all;
}

.ogp-card-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ogp-card-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes ogp-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.post-media-wrap {
  position: relative;
  margin: 8px 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-secondary);
}

.post-media-wrap.is-sensitive .post-media-item {
  filter: blur(24px);
  transform: scale(1.06);
  pointer-events: none;
}

.post-media-sensitive-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.post-media-sensitive-overlay-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.post-media-sensitive-overlay-label {
  font-size: 14px;
  font-weight: 700;
}

.post-media-sensitive-overlay-hint {
  font-size: 12px;
  opacity: 0.85;
}

.ogp-card-shell {
  position: relative;
}
.ogp-card-shell.is-sensitive .ogp-card-img img {
  filter: blur(24px);
  transform: scale(1.06);
  pointer-events: none;
}
.ogp-card-shell.is-sensitive .ogp-card-body {
  filter: blur(12px);
  pointer-events: none;
}
.ogp-card-shell.is-sensitive .ogp-card {
  pointer-events: none;
}
.ogp-sensitive-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.ogp-sensitive-overlay-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.ogp-sensitive-overlay-label {
  font-size: 14px;
  font-weight: 700;
}
.ogp-sensitive-overlay-hint {
  font-size: 12px;
  opacity: 0.85;
}

.post-media-wrap.post-media-count-1 {
  grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 3 / 2;
}
.post-media-wrap.post-media-count-1 .post-media-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media-wrap.post-media-count-2,
.post-media-wrap.post-media-count-3 {
  aspect-ratio: 3 / 2;
}

.post-media-wrap.post-media-count-2 .post-media-item,
.post-media-wrap.post-media-count-3 .post-media-item {
  aspect-ratio: auto;
  height: 100%;
}

.post-media-wrap.post-media-count-3 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.post-media-wrap.post-media-count-3 .post-media-item:first-child {
  grid-row: 1 / span 2;
}

.post-media-item {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  aspect-ratio: 16 / 9;
}

.post-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-secondary);
}

/* ── タイムライン動画コンテナ ── */
.post-media-item-video {
  aspect-ratio: 9 / 16;
  max-height: 70svh;
  background: #000;
}

@media (hover: hover) and (pointer: fine) {
  .post-media-item-video--landscape {
    aspect-ratio: 16 / 9;
  }
}

.post-media-item-video .post-media {
  object-fit: contain;
  background: #000;
}

.post-media-item-video-viewer {
  cursor: pointer;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  aspect-ratio: 16 / 9;
  max-height: none;
}

.post-media-item-video-viewer .post-media {
  object-fit: cover;
  object-position: center center;
  background: #000;
}

.post-media-item-video-viewer .post-media-video-thumb {
  object-fit: cover;
  object-position: center center;
}

.post-media-video-play-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.post-media-video-play-indicator-icon {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.post-media-video-play-indicator-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.74rem;
  height: 0.88rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-42%, -50%);
}

.post-media-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── モバイルカスタムプレイヤー ── */
.cvp-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}

/* 中央タップ領域 */
.cvp-tap {
  position: absolute;
  inset: 0 0 44px 0;
  cursor: pointer;
}

/* 中央の再生/停止アイコン */
.cvp-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s;
}
.cvp-play-icon.hidden {
  opacity: 0;
}
.cvp-play-icon svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* 下部コントロールバー */
.cvp-controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.cvp-controls button {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cvp-controls svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.cvp-time {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.cvp-progress-wrap {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
.cvp-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  position: relative;
}
.cvp-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  width: 0%;
}
.cvp-expand-btn {
  pointer-events: auto;
}

/* PC ではカスタムプレイヤーを非表示 */
@media (hover: hover) and (pointer: fine) {
  .cvp-wrap { display: none; }
}

/* ── カスタム全画面モーダル（fixed、向き不問） ── */
.cvp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.cvp-modal video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}
.cvp-modal .cvp-wrap {
  display: flex;
}
/* モーダル内の閉じるボタン */
.cvp-modal-close {
  position: absolute;
  top: max(env(safe-area-inset-top), 12px);
  left: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.cvp-modal-close svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.cvp-modal-post {
  --bg: #000;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-secondary: rgba(255, 255, 255, 0.08);
  --bg-overlay: rgba(0, 0, 0, 0.9);
  --border: rgba(255, 255, 255, 0.14);
  --border-card: rgba(255, 255, 255, 0.18);
  --post-divider: rgba(255, 255, 255, 0.14);
  color: #fff;
  --text: #fff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-soft: rgba(255, 255, 255, 0.52);
  --accent: #fff;
  --accent-soft: rgba(255, 255, 255, 0.16);
  --comment-hover: rgba(255, 255, 255, 0.1);
  --primary-soft: rgba(255, 255, 255, 0.14);
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

.cvp-modal-post .cvp-viewer-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100vw, 960px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}

.cvp-modal-post .cvp-viewer-shell::-webkit-scrollbar {
  display: none;
}

.cvp-modal-post .cvp-viewer-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 0;
  background: #000;
  touch-action: none;
}

.cvp-modal-post .cvp-viewer-stage video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.cvp-modal-post .cvp-viewer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.cvp-modal-post .cvp-viewer-controls button {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cvp-modal-post .cvp-viewer-controls svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.cvp-modal-post .cvp-viewer-play-btn {
  background: rgba(255, 255, 255, 0.14);
}

.cvp-modal-post .cvp-progress-wrap {
  height: 22px;
}

.cvp-modal-post .cvp-time {
  color: rgba(255, 255, 255, 0.82);
}

.cvp-modal-post .cvp-viewer-post {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 12px;
  padding: 12px 16px 88px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.94) 52%, rgba(0, 0, 0, 0.82) 78%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  min-height: 0;
  max-height: min(44svh, 26rem);
  overflow: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    max-height 180ms ease,
    padding-top 180ms ease,
    padding-bottom 180ms ease,
    visibility 0s linear 180ms;
}

.cvp-modal-post.is-chrome-hidden .cvp-modal-close,
.cvp-modal-post.is-chrome-hidden .cvp-viewer-post {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s;
}

.cvp-modal-post.is-chrome-hidden .cvp-modal-close {
  transform: translateY(-10px);
}

.cvp-modal-post.is-chrome-hidden .cvp-viewer-post {
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cvp-viewer-author {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cvp-viewer-author-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cvp-viewer-author-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.cvp-viewer-author-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.cvp-viewer-author-handle,
.cvp-viewer-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.cvp-viewer-body {
  font-size: 15px;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  touch-action: pan-y;
}

.cvp-viewer-body::-webkit-scrollbar {
  display: none;
}

.cvp-viewer-body .body-text,
.cvp-viewer-body .post-body {
  color: #fff;
}

.cvp-viewer-actions {
  padding-top: 4px;
}

.cvp-viewer-actions .action-row {
  max-width: none;
  width: 100%;
  margin-left: 0;
}

.cvp-viewer-actions .act-btn {
  color: rgba(255, 255, 255, 0.76);
}

.cvp-viewer-actions .act-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cvp-viewer-actions .act-share:hover,
.cvp-viewer-actions .act-bookmark:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cvp-viewer-actions .act-comment:hover {
  color: #fff;
}

.cvp-viewer-actions .act-btn .icon {
  fill: currentColor;
}

.cvp-viewer-actions .act-like.active,
.cvp-viewer-actions .act-repost.active,
.cvp-viewer-actions .act-bookmark.active {
  color: #fff;
}

.video-codec-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #111;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.4;
}

.post-media-gif-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 7px;
  border-radius: 9999px;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ===================================================================
   Action row & action buttons
   =================================================================== */

.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 425px;
  margin-left: -8px;
}

/* Base action button */
.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  min-height: 36px;
  min-width: 36px;
  justify-content: center;
}

.act-btn .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0;
  fill: currentColor;
}

.act-btn .icon-bookmark {
  width: 18px;
  height: 18px;
}

.act-btn span {
  font-size: 13px;
}

.act-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 誤タップ対策: アイコンの見た目の位置・サイズ・間隔は一切変えず、
   当たり判定だけを疑似要素で拡張する。上下はボタン高（=行の上下端）のまま、
   左右は隣接ボタンとの間隙のほぼ中間までカバーする。
   注意: 拡張幅が実際の間隙を超えると、DOM後続ボタンの疑似要素が前のボタンの
   表面まで覆って誤発火するため、拡張幅は必ず「その画面幅での間隙」未満に保つ。
   間隙は space-between のため画面幅で変わる（実測: 投稿行 8.3px@320 →
   25.8px@390+、コメント行 29.4px@320 → 52.8px@390+）ので、モバイルファーストの
   3段階で中間ちょうど＋α に合わせる。取り切れない残り間隙と行両端の余白は
   is-openable 側の .action-row 除外（shouldIgnoreOpenPostTap）で no-op になる。
   行の外（first/last の外側）へは広げない。 */
.action-row .act-btn {
  position: relative;
}

.action-row .act-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  right: -5px;
}

.comment-action-row .act-btn::after {
  left: -15px;
  right: -15px;
}

@media (min-width: 360px) {
  .action-row .act-btn::after {
    left: -10px;
    right: -10px;
  }

  .comment-action-row .act-btn::after {
    left: -22px;
    right: -22px;
  }
}

@media (min-width: 390px) {
  .action-row .act-btn::after {
    left: -13px;
    right: -13px;
  }

  .comment-action-row .act-btn::after {
    left: -27px;
    right: -27px;
  }
}

.action-row .act-btn:first-child::after {
  left: 0;
}

.action-row .act-btn:last-child::after {
  right: 0;
}

/* 動画ビューアの縦積みアクション列では左右拡張が動画面のタップを奪うため無効化 */
.cvp-viewer-actions .act-btn::after {
  content: none;
}

/* Comment button — X blue on hover */
.act-comment:hover {
  background: var(--comment-hover);
  color: var(--accent);
}

/* Repost button — green on hover and when active */
.act-repost:hover {
  background: var(--repost-bg);
  color: var(--repost);
}

.act-repost.active {
  color: var(--repost);
}

.act-repost.active .icon {
  fill: var(--repost);
}

.act-share:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.act-share {
  padding: 8px;
}

/* Like button — pink on hover and when active */
.act-like:hover {
  background: var(--like-bg);
  color: var(--like);
}

.act-like.active {
  color: var(--like);
}

.act-like.active .icon {
  fill: var(--like);
}

.act-bookmark:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.act-bookmark.active {
  color: var(--text);
}

.act-bookmark.active .icon {
  fill: var(--text);
}

/* ===================================================================
   Comments panel
   =================================================================== */

.comments-panel {
  margin-top: 8px;
  padding: 12px 0 4px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Flat comment cards */
.comment-post-card {
  --comment-avatar-size: 28px;
  --comment-indent: 20px;
  --comment-thread-line-width: 2px;
  --comment-thread-line-color: var(--border);
  --comment-panel-offset: 44px;
  position: relative;
  padding: 10px 0 0;
  border-bottom: none;
  gap: 12px;
}

.comment-post-card:first-of-type {
  padding-top: 0;
}

.comment-avatar-rail {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--comment-avatar-size) + (var(--comment-depth) * var(--comment-indent)));
  min-width: calc(var(--comment-avatar-size) + (var(--comment-depth) * var(--comment-indent)));
}

.comment-avatar-rail > .avatar-link,
.comment-avatar-rail > .avatar-xs {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--comment-avatar-size);
  height: var(--comment-avatar-size);
  margin-left: calc(var(--comment-depth) * var(--comment-indent));
}

.comment-avatar-rail > .avatar-link > .avatar-xs,
.comment-avatar-rail > .avatar-link > .avatar-img {
  width: 100%;
  height: 100%;
}

.post-item {
  --comment-panel-offset: 52px;
}

.post-content > .comments-panel {
  margin-left: calc(var(--comment-panel-offset) * -1);
  width: calc(100% + var(--comment-panel-offset));
}

.comment-post-card-connect-down .comment-avatar-rail::after,
.comment-post-card-connect-parent .comment-avatar-rail::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.comment-post-card-connect-down .comment-avatar-rail::after {
  left: calc((var(--comment-depth) * var(--comment-indent)) + (var(--comment-avatar-size) / 2));
  top: calc(var(--comment-avatar-size) / 2);
  bottom: -12px;
  width: var(--comment-thread-line-width);
  background: var(--comment-thread-line-color);
  transform: translateX(-50%);
}

.comment-post-card-connect-parent .comment-avatar-rail::before {
  left: calc((var(--comment-parent-depth) * var(--comment-indent)) + (var(--comment-avatar-size) / 2));
  top: -10px;
  width: calc(var(--comment-indent) + (var(--comment-avatar-size) / 2));
  height: calc((var(--comment-avatar-size) / 2) + 12px);
  border-left: var(--comment-thread-line-width) solid var(--comment-thread-line-color);
  border-bottom: var(--comment-thread-line-width) solid var(--comment-thread-line-color);
  border-bottom-left-radius: 12px;
}

.comment-post-context {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--primary);
}

/* ===================================================================
   Notifications
   =================================================================== */

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.notif-item:hover {
  background: var(--bg-hover);
}

.notif-item.unread {
  background: rgba(15, 20, 25, 0.03);
  border-left: 3px solid #536471;
}

.notif-item.unread:hover {
  background: rgba(15, 20, 25, 0.06);
}

.notif-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon .icon {
  width: 20px;
  height: 20px;
}

.notif-like .icon {
  fill: var(--like);
  color: var(--like);
}

.notif-repost .icon {
  fill: var(--repost);
  color: var(--repost);
}

.notif-comment .icon {
  fill: var(--primary);
  color: var(--primary);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-body strong {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}

.notif-body span {
  font-size: 14px;
  color: var(--text-secondary);
}

.notif-body p {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ── X式レイアウト（2026-07-17 オーナー見本準拠に作り直し） ──
   行構造: 左ガター(大きめ種類アイコン) + コンテンツ列(横並びアバター → 一文 → 抜粋2行clamp)。
   時刻・@handle は出さない。 */
.notif-gutter {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.notif-gutter-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}

.notif-gutter-icon .icon {
  width: 28px;
  height: 28px;
}

.notif-gutter-icon.notif-like {
  color: var(--like);
}
.notif-gutter-icon.notif-like .icon {
  fill: var(--like);
}

.notif-gutter-icon.notif-repost {
  color: var(--repost);
}
.notif-gutter-icon.notif-repost .icon {
  fill: var(--repost);
}

.notif-gutter-icon.notif-quote {
  color: var(--notif-quote);
}
.notif-gutter-icon.notif-quote .icon {
  fill: var(--notif-quote);
}

.notif-gutter-icon.notif-reply,
.notif-gutter-icon.notif-mention {
  color: var(--notif-reply);
}
.notif-gutter-icon.notif-reply .icon,
.notif-gutter-icon.notif-mention .icon {
  fill: var(--notif-reply);
}

.notif-gutter-icon.notif-bug_report,
.notif-gutter-icon.notif-bug_report_update {
  color: var(--text-soft);
  font-size: 20px;
}

/* お知らせ通知（type: "announcement"、2026-08-25 cast「お知らせ」→通知統合）。
   既存のbug_report系と同じ「システム発の通知」トーンを流用し、新しい色や装飾は足さない。 */
.notif-gutter-icon.notif-announcement {
  color: var(--text-soft);
}

.notif-gutter-icon.notif-moderation_delete {
  color: var(--text-soft);
  font-size: 20px;
}

/* ===================================================================
   告知ページ (/announcements/:id)  — 2026-08-25 オーナー裁定
   骨格（置き場所=.feed-view、戻る導線=共通ヘッダーの#header-back-btn、テーマ対応=
   既存トークンの使い回し）は他のサブページ（利用規約・不具合報告等）と同じにし、
   ここで新規に定義するのはzeta風の読みやすさに関わる差分だけ（章見出し・箇条書き・
   リンクの見た目・タイトル/日付の階層）。トークンは --bg / --text / --text-secondary /
   --border のみを使う。border-radiusは増やさない（角丸強化・pill型・LP的装飾はしない）。
   最大幅はSNS中央カラム(.main)に委ねる（ここでは指定しない＝独自の余白体系を持たない）。
   =================================================================== */
.announcement-detail {
  padding: 20px 16px 56px;
  color: var(--text);
}

.announcement-detail-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
}

.announcement-detail-date {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--text-secondary);
}

.announcement-detail-body {
  font-size: 15px;
  line-height: 1.75;
}

.announcement-detail-body .announcement-paragraph {
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}

.announcement-detail-body .announcement-bullet-line {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.announcement-detail-body .announcement-heading {
  margin: 32px 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.announcement-detail-body .announcement-heading:first-child {
  margin-top: 0;
}

.announcement-detail-body .announcement-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.announcement-detail-body .announcement-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notif-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-avatar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 最大10個表示（2026-07-17 オーナー指示で4→10）。1行に収まらない分は折り返す */
  flex-wrap: wrap;
}

.notif-actor-avatar {
  line-height: 0;
}

.notif-actor-avatar .avatar-sm {
  width: 36px;
  height: 36px;
}

.notif-line {
  margin: 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.notif-line strong {
  font-weight: 700;
  color: var(--text);
}

.notif-excerpt {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 引用通知は引用コメント本文を主役にする（本文を主色・やや強めに）。 */
.notif-excerpt-quote {
  color: var(--text);
  font-weight: 600;
}

/* ── 通知ヘッダーのプルダウンフィルタ ── */
.header-logo-link.header-notifications-filter-slot {
  position: relative;
  width: 100%;
  justify-self: stretch;
}

.notif-filter-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.notif-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  min-height: 44px;
  padding: 4px 8px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}

.notif-filter-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid currentColor;
  font-size: 0;
  color: var(--text);
}

.notif-filter-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  min-width: 190px;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-toast);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.notif-filter-menu[hidden] {
  display: none;
}

.notif-filter-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.notif-filter-option:hover {
  background: var(--bg-hover);
}

.notif-filter-option.is-active {
  color: var(--primary);
  font-weight: 700;
}

/* ===================================================================
   Right sidebar
   =================================================================== */

.rsidebar {
  width: clamp(360px, 34vw, 440px);
  flex-shrink: 0;
  padding: 0 0 0 12px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

/* 右側常設レイアウト（#desktop-dev-chat-root＝1101px以上）では、ZYNは画面遷移せず
   右に居座るので「戻る」が意味を持たない。ウィジェット側は backButton:true 固定
   （リサイズでフラグが古くならないようにするため）なので、ここで隠す。
   ユーザー報告 2026-07-27 @vex への対応の一部。 */
#desktop-dev-chat-root .zeta-chat-topbar [data-chat-action="go-back"] {
  display: none;
}

/* 右側チャット常設幅ではサイドバーの「ZYNと話す」ナビは冗長なので非表示。
   境界は .rsidebar の表示条件（max-width:1100px で非表示）および
   JS isDesktopDevChatSidebarLayout() の matchMedia(min-width:1101px) と同一に保つこと */
@media (min-width: 1101px) {
  .sidebar-nav .snav-item[data-nav="chat"] {
    display: none;
  }
}

.desktop-dev-chat-root {
  height: 100%;
  min-height: 0;
}

.desktop-dev-chat-root > .empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-left: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}

.desktop-dev-chat-root .zeta-chat-root,
.desktop-dev-chat-root .zeta-chat-shell {
  height: 100%;
  min-height: 100%;
}

.desktop-dev-chat-root .zeta-chat-shell {
  /* デスクトップ常設サイドバー内のパネルなので、モバイル向けの
     position: fixed(visual viewport直接固定)は打ち消し、
     通常のドキュメントフロー内に戻す。 */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  border-left: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg);
}

.desktop-dev-chat-root .zeta-chat-sidebar {
  width: calc(100% - 56px);
  max-width: none;
}

/* チャット専用ボトムシート（キャラ設定/スレッド操作）はモバイルでは
   position: fixed で visual viewport 全体に直接固定される作りだが、
   .zeta-chat-shell の position: fixed → relative 上書き（above）に伴い、
   fixed のままだと祖先である .zeta-chat-shell の z-index:10 スタッキング
   コンテキストに閉じ込められたまま、left:0/right:0 でウィンドウ全幅に
   広がってタイムライン列（TLの伏せフィルターオーバーレイ等）に重なって
   しまう。.zeta-chat-shell（position: relative, overflow: hidden）を
   containing block とする position: absolute に切り替え、サイドバー内の
   パネル領域に閉じ込める。z-index はモバイルと同じ 60/61 のままで、
   .zeta-chat-shell 内のスタッキングで完結する。 */
.desktop-dev-chat-root .zeta-chat-sheet-overlay {
  position: absolute;
}

.desktop-dev-chat-root .zeta-chat-sheet {
  position: absolute;
}

.server-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}

.server-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}

.server-summary-label .server-badge {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.legal-links-card {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-links-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--text-secondary);
}

.legal-link {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-link:hover {
  color: var(--text);
}

.legal-links-sep {
  color: var(--text-secondary);
}

.legal-page-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.legal-page-card h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.legal-page-card p,
.legal-page-card li {
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-page-card section + section {
  margin-top: 28px;
}

.legal-page-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.legal-page-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 16px 0 4px;
  color: var(--text);
}

.legal-page-card h4:first-child {
  margin-top: 0;
}

/* ── サポートページ（note リスペクト） ── */

/* ページ全体の文字まわり */
.support-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s5);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.support-page h2 {
  font-size: var(--type-page-size);
  font-weight: 600;
  letter-spacing: var(--type-heading-track);
  line-height: 1.4;
  margin-bottom: var(--s2);
  color: var(--text);
}

.support-page .support-page-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--s4);
}

/* トップナビ — 枠なし・下線区切り */
.support-nav {
  display: flex;
  flex-direction: column;
}

.support-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: opacity var(--transition);
}

.support-nav-item:first-child {
  border-top: 1px solid var(--border);
}

@media (hover: hover) {
  .support-nav-item:hover {
    opacity: 0.65;
  }
}

.support-nav-item:active {
  opacity: 0.65;
}

.support-nav-label {
  flex: 1;
}

.support-nav-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* サブページ共通 */
.support-subpage h2 {
  margin-bottom: 28px;
}

.support-subpage section {
  margin-top: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.support-subpage section:first-of-type {
  border-top: 1px solid var(--border);
}

.support-subpage section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.support-subpage section p {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.85;
}


/* FAQ アコーディオン */
.support-faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.support-faq-item:first-of-type {
  border-top: 1px solid var(--border);
}

.support-faq-item summary {
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.support-faq-item summary::-webkit-details-marker {
  display: none;
}

.support-faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  line-height: 1;
}

.support-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.support-faq-item p {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.85;
}

.legal-page-card ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.report-page-card .report-meta {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.report-page-card .report-dev-build {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 13px;
}

.report-page-card .report-top-actions {
  display: flex;
  margin: 0 0 16px;
}

.report-page-card .report-top-copy-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.report-page-card .report-top-copy-btn:hover {
  background: var(--primary-hover);
}

.report-page-card .report-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 14px;
}

.report-page-card .report-breadcrumb-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.report-page-card .report-breadcrumb-btn:hover {
  color: var(--text);
  text-decoration: underline;
}

.report-page-card .report-breadcrumb-current {
  color: var(--text);
  font-weight: 700;
}

.report-page-card .report-breadcrumb-sep {
  color: var(--text-secondary);
}

.report-page-card .report-card-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.report-page-card .report-card-btn {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}

.report-page-card .report-card-btn:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.report-page-card .report-card-btn strong {
  font-size: 16px;
}

.report-page-card .report-card-btn span {
  color: var(--text-secondary);
  line-height: 1.55;
}

.report-page-card .report-card-btn .report-card-kicker,
.report-page-card .report-card-btn .report-card-meta {
  font-size: 13px;
}

.report-page-card .report-article-head {
  margin-bottom: 22px;
}

.report-page-card .report-article-head h2 {
  margin-bottom: 10px;
}

.report-page-card .report-article-head p {
  margin: 0;
}

.report-page-card .report-article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.report-page-card .report-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.report-page-card .report-article-updated {
  color: var(--text-secondary);
  font-size: 13px;
}

.report-page-card .report-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.report-page-card .report-primary-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.report-page-card .report-primary-copy-btn:hover {
  background: var(--primary-hover);
}

.report-page-card strong {
  color: var(--text);
  font-weight: 700;
}

.report-page-card a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-page-card .report-links {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.report-page-card .report-links a,
.report-page-card .report-source-list a {
  overflow-wrap: anywhere;
}

.report-page-card .report-callout {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.report-page-card code {
  padding: 0.12em 0.38em;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.report-page-card ol,
.report-page-card ul {
  margin: 10px 0 0 20px;
  padding: 0;
}

.report-page-card li + li {
  margin-top: 6px;
}

.report-page-card .report-source-list {
  display: grid;
  gap: 8px;
}

/* ===================================================================
   Bottom navigation (mobile)
   =================================================================== */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(54px + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 50;
  align-items: center;
  justify-content: space-around;
  transition: transform 0.2s ease;
  will-change: transform;
}

.bottom-nav.bottom-nav--hidden {
  transform: translate3d(0, 100%, 0);
}

/* チャット画面ではキーボード表示中もボトムナビをキーボード直上に残す。
   .zeta-chat-shell の高さは「visual viewport − ナビ高さ」で計算しており
   (--compose-viewport-height 参照)、ナビが見えている前提の式のため、
   fixed のナビが layout viewport 底(=キーボードの裏)に残ると
   入力欄とキーボードの間にナビ高さ分の空白ができてしまう。
   以前は --compose-keyboard-inset (= window.innerHeight − visualViewport.height)
   を bottom に適用して持ち上げていたが、これは window.innerHeight が
   fixed要素の実際のcontaining block(layout viewport)と食い違うタイミング
   （キーボード表示アニメーション中の中間状態、Android端末・PWAスタンドアロン
   表示等でlayout viewport自体がリサイズされる/されないの違い等）が起きると、
   ナビがキーボード直上ではなく画面中間に浮いてしまい、チャット本文が
   ほぼ見えなくなる不具合があった。
   top側はvisualViewport由来の値(offset-top + viewport-height)だけから
   ナビ上端を直接求められ、window.innerHeightを介さないため上記の食い違いの
   影響を受けない。bottomは明示的に無効化しtopのみで位置決めする。 */
body.chat-view-active .bottom-nav {
  bottom: auto;
  top: max(0px, calc(var(--compose-viewport-offset-top) + var(--compose-viewport-height) - var(--chat-bottom-nav-height)));
}

.bnav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  position: relative;
}

.bnav-item .icon,
.bnav-item .nav-fa,
.bnav-item .nav-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  font-size: 21px;
  line-height: 1;
  transition: color var(--transition), opacity var(--transition);
  opacity: 0.82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bnav-item.active .icon,
.bnav-item.active .nav-fa,
.bnav-item.active .nav-icon {
  color: var(--text);
  opacity: 1;
}

/* 下部ナビの切り替えをモダンに: タップの沈み込み・アイコンのクロスフェード・
   アクティブ化時のポップ。非アクティブは不透明にして色を活かす。 */
.bnav-item {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.bnav-item:active {
  transform: scale(0.88);
}
.bnav-item .nav-icon .nav-svg {
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bnav-item .nav-icon {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.bnav-item.active .nav-icon {
  transform: translateY(-1px) scale(1.14);
}
.bnav-item:not(.active) .nav-icon {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bnav-item,
  .bnav-item .nav-icon,
  .bnav-item .nav-icon .nav-svg {
    transition: none;
  }
}

.bnav-item .badge {
  top: 6px;
  left: 28px;
}

.bottom-nav .bnav-search-icon {
  width: 29px;
  height: 29px;
}

/* AIチャットのZYN公式マーク（吹き出し＋Z＋きらめき）。塗りが密なマークなので
   他ナビアイコンと視覚的に同格になる22pxに（旧◯AIバッジの29px拡大は廃止）。
   .bnav-item は54x54固定でタップ領域・整列は変わらない。 */
.bottom-nav .bnav-chat-icon {
  width: 22px;
  height: 22px;
}

/* ===================================================================
   FAB — Floating Action Button
   =================================================================== */

.fab {
  display: none;
  position: fixed;
  bottom: calc(24px + var(--safe-area-bottom));
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-fab);
  z-index: 40;
  transition: background var(--transition), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  will-change: transform, opacity;
}

.fab:not([hidden]) {
  display: flex;
}

.fab:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
}

.fab.fab--hidden,
.fab.fab--hidden:hover {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.fab .icon {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* ===================================================================
   Profile
   =================================================================== */

.profile-cover {
  position: relative;
  width: 100%;
  height: 130px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.profile-card {
  position: relative;
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.profile-card-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: -36px;
}

.profile-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #cfd9de;
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 3px solid var(--bg);
  flex-shrink: 0;
}

.avatar-img {
  object-fit: cover;
  border-radius: 50%;
}

.avatar-icon {
  width: 58%;
  height: 58%;
  fill: #fff;
  display: block;
}

img.profile-avatar {
  width: 72px;
  height: 72px;
  margin: 0;
  display: block;
}

.header-avatar-has-img {
  padding: 0;
  overflow: hidden;
}

.header-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-sound-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  cursor: pointer;
  border: none;
  color: var(--text-secondary);
}
.profile-sound-btn .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.profile-sound-btn.sound-on {
  color: var(--accent);
}
.profile-sound-btn:not(.sound-on) {
  color: var(--error, #e5534b);
}

.profile-settings-menu {
  position: absolute;
  top: 16px;
  right: 16px;
}

.header-main-menu .inline-action-menu-popover {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 220px;
}

.profile-settings-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 0;
}

.profile-settings-toggle-btn:hover,
.inline-action-menu.is-open .profile-settings-toggle-btn {
  background: transparent;
}

.profile-settings-toggle-btn .icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.settings-detail-card {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
}

.settings-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.settings-detail-list > li {
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

.settings-detail-list > li:last-child {
  border-bottom: 0;
}

.settings-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.12s ease;
}

.settings-detail-row:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.settings-detail-row:focus-visible {
  outline: 2px solid var(--accent, var(--primary, #1d9bf0));
  outline-offset: -2px;
}

.settings-detail-row-icon {
  flex: 0 0 auto;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--muted, var(--text-secondary, #6b7280));
}

.settings-detail-row-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-detail-row-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.settings-detail-row-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, var(--text-secondary, #6b7280));
}

.settings-detail-row-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--primary, #1d9bf0);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.settings-detail-row[data-active="true"] .settings-detail-row-check {
  opacity: 1;
}

.settings-detail-row[data-active="true"] .settings-detail-row-title {
  color: var(--text);
}

.settings-detail-row-static {
  cursor: default;
}

.settings-detail-row-static:hover {
  background: transparent;
}

.settings-detail-summary {
  margin: 6px 16px 4px;
  color: var(--muted, var(--text-secondary, #6b7280));
  font-size: 13px;
}

.settings-detail-row-user {
  cursor: default;
  gap: 12px;
}

.settings-detail-row-user:hover {
  background: transparent;
}

.settings-detail-row-user-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.settings-detail-row-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settings-detail-row-user-meta strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-detail-row-user-meta span {
  font-size: 12px;
  color: var(--muted, var(--text-secondary, #6b7280));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-detail-row-toggle {
  cursor: pointer;
}

.settings-detail-row-toggle[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

.settings-toggle {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg-hover, #cfd9de);
  transition: background-color 0.18s ease;
}

.settings-toggle.is-on {
  background: var(--primary, #1d9bf0);
}

.settings-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease;
}

.settings-toggle.is-on .settings-toggle-thumb {
  transform: translateX(18px);
}

.settings-detail-row-toggle:focus-visible .settings-toggle,
.cast-timeline-switch-label input:focus-visible + .settings-toggle {
  outline: 2px solid var(--primary, #1d9bf0);
  outline-offset: 2px;
}

.settings-detail-row-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--text-secondary, #6b7280);
}

.settings-detail-row-badge[data-tone="active"] {
  background: var(--primary-soft, rgba(29, 155, 240, 0.12));
  color: var(--primary, #1d9bf0);
}

.settings-detail-row-badge[data-tone="blocked"] {
  background: rgba(244, 33, 46, 0.12);
  color: var(--danger, #f4212e);
}

.settings-detail-note {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(244, 33, 46, 0.08);
  color: var(--danger, #f4212e);
  font-size: 13px;
  line-height: 1.5;
}

/* 警告ではなく単なる補足説明のためのニュートラル配色バリアント */
.settings-detail-note-info {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
  color: var(--muted, var(--text-secondary, #6b7280));
}

.settings-detail-actions {
  margin-top: 18px;
  padding: 0 16px;
}

.settings-detail-fieldset {
  border: 0;
  margin: 0;
  padding: 16px 16px 0;
}

.settings-gender-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-gender-option {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.14));
  border-radius: 6px;
  cursor: pointer;
}

.settings-gender-option:focus-within {
  outline: 2px solid var(--text-primary, #111);
  outline-offset: 1px;
}

.settings-gender-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.settings-detail-cta {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.settings-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  text-align: center;
}

.settings-detail-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--text-secondary, #6b7280);
  font-size: 20px;
  margin-bottom: var(--s1);
}

.settings-detail-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.settings-detail-empty-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #6b7280);
  max-width: 280px;
}

.profile-mute-section.settings-home-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.settings-nav-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.settings-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}

.settings-nav-item:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.settings-nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  flex-shrink: 0;
}

.settings-nav-item-icon .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.settings-nav-item-icon i {
  font-size: 18px;
  line-height: 1;
}

.settings-nav-item-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-nav-item-copy strong {
  color: var(--text);
  font-size: 15px;
}

.settings-nav-item-copy span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

#zeta-chat-widget-root {
  min-height: calc(var(--compose-viewport-height) - var(--chat-bottom-nav-height));
}

.zeta-chat-root .sr-only,
.zeta-chat-shell .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.zeta-chat-root {
  display: block;
}

.zeta-chat-shell {
  /* iOS/Android の 100dvh はキーボード表示時に再計算されないことがある
     （実スクロールが発生した場合のみ再レイアウトされる既知の挙動）。
     メッセージが1件もない新規チャットは .zeta-chat-scroll がスクロール不要な
     高さのため、この再計算が起きずキーボードに追従しない。
     compose セクションと共通の visualViewport 計測（--compose-viewport-height、
     app.js の resize/scroll リスナーで常時更新）に乗せることで、
     メッセージの有無に関わらず同じ機構でキーボードに追従させる。
     ただし高さをvisualViewport基準にするだけでは、shell自身が通常のドキュメント
     フロー内に置かれたまま(position: relative)だと、キーボード表示中にページ側の
     残り領域が空白として残ってしまう(スクロールするとチャット全体が上にずれる不具合の
     原因)。.compose-section と同じく position: fixed + --compose-viewport-offset-top
     で画面(visual viewport)に直接固定する。 */
  position: fixed;
  top: var(--compose-viewport-offset-top);
  left: 0;
  right: 0;
  width: 100%;
  min-height: calc(var(--compose-viewport-height) - var(--chat-bottom-nav-height));
  height: calc(var(--compose-viewport-height) - var(--chat-bottom-nav-height));
  /* position:fixed + z-index はここでスタッキングコンテキストを作るため、内部の
     .zeta-chat-sheet（キャラ設定/スレッド操作シート）に z-index:61 を積んでも、
     それは .zeta-chat-shell 内部限定の話でしかない。.bottom-nav（z-index:50）と
     比較されるのは shell 自体のこの値であり、これが50未満だとシートが
     fixed(bottom:0)で画面最下部まで伸びていてもボトムナビの下に潜り込み、
     シート最下部のボタン（例: 「ZYNの記憶を消す」）がナビに隠れて押せなくなる。
     通常時（シート非表示時）は shell の高さ自体が --chat-bottom-nav-height 分
     ナビの上で止まるよう計算済みでナビと重ならないため、この変更で見た目は変わらない。 */
  z-index: 52;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--bg);
}

/* 運営トークルーム（roomNotice、2026-08-09）: .zeta-chat-room-notice は
   .zeta-chat-shell の直下に .zeta-chat-scroll の直前へ差し込まれるopt-inの
   グリッド子要素で、既定のトラック定義（3行）のままだと本来スクロール領域用の
   minmax(0,1fr)をノーティスが奪い、.zeta-chat-scrollが後ろへ押し出されて縮む。
   ノーティスが実在するときだけ4行構成に切り替える。roomNoticeを渡さない
   既存呼び出し（ZYN本体/不具合報告チャット/cast/trial/admin-brain）は要素自体が
   存在しないため:has()がマッチせず、grid-template-rowsは元のまま不変。 */
.zeta-chat-shell:has(> .zeta-chat-room-notice) {
  grid-template-rows: 56px auto minmax(0, 1fr) auto;
}

.zeta-chat-room-notice {
  padding: 10px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

/* 削除済みキャストの過去トーク閲覧（2026-08-10）: 常時[hidden]の予約枠として置いておき、
   閲覧専用モードのときだけJS側がhiddenを外す。roomNoticeと同じ理由で、表示時だけ
   グリッド行を1本足す必要がある（両者は同時に使われないため:has()の対象が競合しない）。 */
.zeta-chat-shell:has(> .cast-chat-readonly-banner:not([hidden])) {
  grid-template-rows: 56px auto minmax(0, 1fr) auto;
}

.cast-chat-readonly-banner {
  padding: 8px 16px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.zeta-chat-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 56px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 5;
  overflow: hidden;
}

.zeta-chat-topbar-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
}

.cast-chat-topbar-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg);
}

.zeta-chat-topbar-tt {
  min-width: 0;
}

.zeta-chat-topbar-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.zeta-chat-topbar-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zeta-chat-room-more[aria-expanded="true"] {
  background: var(--bg-hover);
}

.zeta-chat-room-panel {
  display: contents;
}

/* チャット専用ボトムシート（☺キャラ設定 / ⋯スレッド操作）。
   repost-picker-* / action-sheet-* は流用せず、ここで完結させる。 */
.zeta-chat-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 60;
}

.zeta-chat-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.zeta-chat-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 61;
  pointer-events: none;
}

.zeta-chat-sheet.open {
  transform: translateY(0);
  pointer-events: auto;
}

.zeta-chat-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px 20px 0 0;
  background: var(--bg);
  box-shadow: 0 -8px 40px rgba(13, 13, 13, 0.2);
  z-index: -1;
}

.zeta-chat-sheet-content {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 中身（記憶ビュー等）が長いとシートが画面上端より上に伸びてヘッダー(閉じるボタン)ごと
     見えなくなる上、position:fixedのシートはdocumentのスクロールにも乗らず、スクロール
     不能・閉じるボタン到達不能になっていた。シート自体の高さを画面内に収め、はみ出す分は
     下の.zeta-chat-sheet-body側だけを内部スクロールさせる。 */
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
  padding: 10px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.zeta-chat-sheet-grabber {
  flex: 0 0 auto;
  width: 38px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border);
  margin: 4px auto 10px;
}

.zeta-chat-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
}

.zeta-chat-sheet-title {
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.zeta-chat-sheet-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
}

.zeta-chat-sheet-close:hover {
  background: var(--bg-hover);
}

.zeta-chat-sheet-close:disabled {
  opacity: 0.6;
}

/* キャラ設定の✓保存ボタン。送信ボタン（.zeta-chat-send）と同じ塗りつぶしの丸で主アクションを示す */
.zeta-chat-sheet-close.zeta-chat-sheet-confirm {
  background: var(--primary);
  color: var(--bg);
}

.zeta-chat-sheet-close.zeta-chat-sheet-confirm svg {
  display: block;
}

.zeta-chat-sheet-close.zeta-chat-sheet-confirm:hover {
  background: var(--primary);
}

:root[data-theme="dark"] .zeta-chat-sheet-close.zeta-chat-sheet-confirm {
  color: #000;
}

.zeta-chat-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

.zeta-chat-sheet-actions {
  display: flex;
  flex-direction: column;
}

.zeta-chat-sheet-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.zeta-chat-sheet-action:hover {
  background: var(--bg-hover);
}

.zeta-chat-sheet-action:disabled {
  opacity: 0.5;
}

.zeta-chat-sheet-action-icon {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}

.zeta-chat-sheet-action-icon .cast-row-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.zeta-chat-sheet-action-copy {
  min-width: 0;
}

.zeta-chat-sheet-action-danger {
  color: var(--danger);
}

.zeta-chat-sheet-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0;
}

.zeta-chat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 400;
  line-height: 0;
}

.zeta-chat-icon-btn:hover {
  background: var(--bg-hover);
}

/* ヘッダーの整理（2026-07-21 快適さバッチ、castのみ）: 以前は発見性強化のため
   「≡ 会話一覧」のラベル付きチップにしていたが、管理系UIがヘッダーの一等地で主張しすぎる
   ためアイコンのみに戻し、キャラの名前とアバターを主役にする（スレッド切替はボトムバーの
   トークタブでも辿れる）。サブタイトル（スレッドタイトル=大抵は自分の初回発言）も情報価値が
   低いのでcastでは出さない。ZYN本体/不具合報告チャットは不変。 */
.cast-chat-widget-root .zeta-chat-topbar-sub {
  display: none;
}

.cast-chat-widget-root .zeta-chat-topbar-name {
  font-size: 16px;
}

.cast-chat-widget-root .zeta-chat-topbar-notice {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

/* ヘッダーのアイコン/名前をタップでキャスト詳細へ（2026-08-16）。
   押せるときだけ app.js が .cast-chat-topbar-detail-link を付ける。
   寸法（アイコン28px・名前のフォント）は既存のまま変えない。名前は本来
   幅いっぱいのブロックなので、タップ領域を文字の幅に収める（見た目は同じ）。 */
.cast-chat-widget-root .cast-chat-topbar-detail-link {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cast-chat-widget-root .zeta-chat-topbar-name.cast-chat-topbar-detail-link {
  width: fit-content;
  max-width: 100%;
}

.cast-chat-widget-root .cast-chat-topbar-detail-link:active {
  opacity: 0.6;
}

.cast-chat-widget-root .cast-chat-topbar-detail-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* アイコン側は border-radius:50% を持つのでoutlineも丸くなる。名前側だけ角を丸める。 */
.cast-chat-widget-root .zeta-chat-topbar-name.cast-chat-topbar-detail-link:focus-visible {
  border-radius: 4px;
}

.zeta-chat-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: none;
}

.zeta-chat-sidebar-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(13, 13, 13, 0.15);
  opacity: 0;
  pointer-events: none;
  /* WebKit系ブラウザは cursor:pointer 等が無い素の <div> でクリックの
     ディスパッチが不安定になることがあるため明示しておく（backdropタップで閉じない既知バグ対策）。 */
  cursor: pointer;
}

.zeta-chat-sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.zeta-chat-sidebar {
  /* 閉じているときのtransform。JS側のスライドアニメーションが始点として読む
     （左右どちらから出すかをCSS1箇所で決めるため）。 */
  --sidebar-closed-transform: translateX(-105%);
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 22;
  width: min(86vw, 320px);
  /* flex縦積み: grid-template-rows は hidden な子が display:none になると残りの子が
     別トラックへずれ、フッターがリスト直後に浮くバグの原因になるため使わない。 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 12px 12px;
  border-right: 1px solid rgba(13, 13, 13, 0.08);
  background: var(--bg);
  box-shadow: 4px 0 24px rgba(13, 13, 13, 0.08);
  transform: translateX(-105%);
  pointer-events: none;
}

.zeta-chat-sidebar.open {
  transform: translateX(0);
  pointer-events: auto;
}

.zeta-chat-new-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  text-align: left;
}

.zeta-chat-new-thread:hover {
  background: var(--bg-hover);
}

.zeta-chat-new-thread-icon {
  font-size: 16px;
  line-height: 1;
}

.zeta-chat-new-thread:disabled {
  opacity: 0.5;
}

.zeta-chat-history-label {
  padding: 0 10px 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zeta-chat-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 2px 0;
  overscroll-behavior: contain;
}

.zeta-chat-thread-actions {
  min-height: 0;
}

.zeta-chat-thread-actions[hidden] {
  display: none;
}

/* スタイル設定（サイドメニュー下部）: cast-chat-widget-root スコープ限定
   （chat-widget.js features.styleSettings、.ai/current-task.md 2026-07-17決定2）。
   ZYN本体/不具合報告チャットは常に[hidden]のままなので、ここに書いても見た目は不変。 */
.cast-chat-widget-root .cast-chat-style-settings[hidden] {
  display: none;
}

.cast-chat-widget-root .cast-chat-style-settings {
  flex: 0 0 auto;
  padding-top: 8px;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cast-chat-widget-root .cast-chat-style-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text);
}

.cast-chat-widget-root .cast-chat-style-settings-label {
  color: var(--text-secondary);
}

.cast-chat-widget-root .cast-chat-style-settings-select {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.cast-chat-widget-root .cast-chat-style-settings-note {
  padding: 0 10px 4px;
  color: var(--text-secondary);
  font-size: 11px;
}

/* チャット背景画像（2026-07-18）: chat-widget.js features.background が有効、かつ実効背景が
   ある場合だけ .zeta-chat-shell に has-chat-bg クラスが付く（rootClassName不問=cast/ZYN共通）。
   背景が無い場合はこのクラス自体が付かないため、既存の見た目・DOMは完全に不変。
   画像/プリセットの本体は z-index:-1 の疑似要素で描画し（shellの通常グリッド子要素より
   下に沈める）、その上にテーマ連動スクリムを重ねる。吹き出し(.zeta-chat-bubble)は
   元々不透明なため触らない。 */
.zeta-chat-shell.has-chat-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--chat-bg-image, none);
  background-color: var(--chat-bg-solid, transparent);
  background-size: cover;
  background-position: var(--chat-bg-position, center);
  /* The display sheet owns this value. Keep the filter on the image layer so
     text, bubbles, controls, and the readability scrim are never dimmed. */
  filter: brightness(var(--chat-bg-brightness, 100%)) blur(var(--chat-bg-blur, 0px));
  opacity: var(--chat-bg-opacity, 1);
  transform: scale(var(--chat-bg-scale, 1));
  pointer-events: none;
}

/* オーナー要望（2026-07-19）: 背景画像は元の色味のまま出したい。全面スクリムは実質見えない
   レベル（0.06/0.08）まで下げる——完全撤去ではなく、画像そのものが極端に明るい/暗い場合の
   保険として最小限だけ残す。可読性は個別パネル（assistant応答・ノベル地の文・空状態・
   コンポーザー、いずれも下の各ブロックで維持）と、背景に直接乗る小さいテキスト
   （キャラ名ラベル・コピー/再生成ボタン）へのtext-shadowで担保する。 */
.zeta-chat-shell.has-chat-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, var(--chat-bg-scrim-opacity, 0.06));
  pointer-events: none;
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg::after {
  background: rgba(0, 0, 0, var(--chat-bg-scrim-opacity, 0.08));
}

/* 表示設定の「読みやすさ」= enhanced。通常時の背景の色味は変えず、選択時だけ
   背景全体の保護膜を少し強める。light/dark の向きを反転させないため、テーマごとに
   白/黒の面を持つ（2026-08-27）。 */
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"]::after {
  background: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"]::after {
  background: rgba(0, 0, 0, 0.2);
}

/* プリセット6種（画像ファイル非同梱、CSSグラデーション/テクスチャのみ。落ち着いた低彩度）。
   実背景（shell::before）とスウォッチプレビュー（背景シート内）の両方で同じ値を使う。 */
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="sunset"]::before,
[data-chat-bg-preset="sunset"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(160deg, #f3d3b8 0%, #e8b49a 35%, #c98a86 70%, #8a6a86 100%);
}
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="night-sky"]::before,
[data-chat-bg-preset="night-sky"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(165deg, #1b2238 0%, #232b47 45%, #2c3454 75%, #383f5c 100%);
}
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="paper"]::before,
[data-chat-bg-preset="paper"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(160deg, #f2ede1 0%, #ece4d3 60%, #e4dac5 100%);
}
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="sprout"]::before,
[data-chat-bg-preset="sprout"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(160deg, #e4ecd8 0%, #cddcbc 45%, #a9c396 100%);
}
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="sea"]::before,
[data-chat-bg-preset="sea"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(160deg, #dbe9ec 0%, #b8d3d9 45%, #86adb8 100%);
}
.zeta-chat-shell.has-chat-bg[data-chat-bg-preset="mono"]::before,
[data-chat-bg-preset="mono"].cast-chat-bg-preset-swatch {
  background-image: linear-gradient(160deg, #e6e6e6 0%, #cfcfcf 50%, #b3b3b3 100%);
}

/* ノベルUIの地の文（バブル外・全幅テキスト）向け磨りガラス帯。has-chat-bg 配下でのみ効く。
   オーナー要望（2026-07-19）で全面スクリムをほぼ撤去したため、この帯単体で可読性を
   担保する必要がある——不透明度を0.55→0.68（ダーク0.45→0.58）へ少し上げる。 */
.zeta-chat-shell.has-chat-bg .cast-novel-narration {
  padding: 8px 10px;
  /* 磨りガラスカードごとセリフバブルの列（40px）に揃え、ナレーターアイコンは
     カードの外（margin領域）に置く（2026-07-21 オーナー指摘のズレ対策）。 */
  margin-left: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.zeta-chat-shell.has-chat-bg .cast-novel-narration-icon {
  left: -40px;
  background-color: var(--cast-narration-surface, var(--bg, #fff));
  color: var(--cast-narration-icon-text, var(--cast-narration-surface-text, var(--text-secondary)));
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .cast-novel-narration {
  background: rgba(0, 0, 0, 0.58);
}

/* ZYN応答（assistant）バブル向け磨りガラスパネル（2026-07-18、実ユーザーフィードバック）。
   .zeta-chat-bubble は既定で背景透明（ユーザー側だけ var(--bg-secondary) が付く実装）のため、
   背景画像が有効なときはZYNの発言がそのまま写真の上に乗って読みにくい。has-chat-bg 配下の
   assistantバブルにだけ、ノベル地の文と同系トーンの半透明パネルを足す。ユーザー側の吹き出し
   （既に不透明の var(--bg-secondary)）とcastのノベルセリフバブル（既存の不透明のまま）は
   対象外——このセレクタは .zeta-chat-message-assistant 配下のみを狙う。
   Codexレビュー指摘（PR #306 2周目 P2）: .zeta-chat-bubble.cast-novel-wrapper
   （novelView時のノベル全体を包む透明ラッパー、background:transparentが正）にもこの
   セレクタがマッチしてしまい、クラス数4>2で詳細度が勝つため枠付きパネルが二重に付いていた
   （中の.cast-novel-narrationが個別に磨りガラスを持つため、外側にも付くと二重に見える）。
   :not(.cast-novel-wrapper) で明示的に除外する。
   オーナー要望（2026-07-19）で全面スクリムをほぼ撤去したため、このパネル単体で可読性を
   担保する必要がある——不透明度を0.55→0.68（ダーク0.45→0.58）へ少し上げる。 */
.zeta-chat-shell.has-chat-bg .zeta-chat-message-assistant .zeta-chat-bubble:not(.cast-novel-wrapper) {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-message-assistant .zeta-chat-bubble:not(.cast-novel-wrapper) {
  background: rgba(0, 0, 0, 0.58);
}

/* 空状態（スレッド未選択の最初のページ）の案内文向け磨りガラスパネル（2026-07-18）。
   backgroundScope="user"（ZYN）は空状態にも背景を描画するため、直に文字が乗ると読みにくい。
   スターター質問ボタン（.zeta-chat-starter-btn）は別途独自の背景を持つため対象外。 */
.zeta-chat-shell.has-chat-bg .zeta-chat-empty {
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-empty {
  background: rgba(0, 0, 0, 0.58);
}

/* コンポーザー外側の帯（2026-07-18、実ユーザーフィードバック）: 通常は不透明
   background: var(--bg) の白い帯だが、背景画像が有効なときは目立って浮いて見える。
   has-chat-bg配下だけ半透明+backdrop-blurの磨りガラスにする。入力ピル
   （.zeta-chat-input-wrap）自体は既存の不透明のまま維持——打ちやすさ・視認性は
   ピル側が担保するため、ここでは触らない。左右の余白で背景がうっすら見えて「枠」に
   見えるのを避けるため、has-chat-bg配下だけ帯を画面幅いっぱいにする
   （中身のinput-wrapは従来どおりmax-width 760pxで中央寄せのまま）。 */
.zeta-chat-shell.has-chat-bg .zeta-chat-composer {
  /* width:100%だけだと中身(input-wrap)もgrid-template-columns: minmax(0,1fr)で
     全幅に広がってしまう。従来のwidth: min(100% - 24px, 760px); margin: 0 auto;
     相当の中央寄せを、帯自体は全幅のままpaddingで再現する。 */
  width: 100%;
  margin: 0;
  padding-left: max(12px, calc((100% - 760px) / 2));
  padding-right: max(12px, calc((100% - 760px) / 2));
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-composer {
  background: rgba(0, 0, 0, 0.45);
}

/* 背景に直接乗る操作ボタン（2026-07-19、オーナー要望）は写真の上でも判別できるよう
   軽い影を残す。キャスト名は文字タブの縁取り設定で保護する。 */
.zeta-chat-shell.has-chat-bg .zeta-chat-copy-btn,
.zeta-chat-shell.has-chat-bg .zeta-chat-regenerate-btn {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 1px rgba(255, 255, 255, 0.6);
}

.cast-chat-widget-root .cast-chat-name,
.cast-chat-widget-root .cast-novel-dialogue-name {
  color: var(--cast-name-text, var(--text-secondary));
  /* Appearance-enabled Cast shells set the outline token. Shared-root widgets such as ops-talk
     leave it unset and keep their previous no-outline appearance. */
  text-shadow: var(--cast-name-text-shadow, none);
}

/* コピー/再生成は明るい写真の上だとtext-shadowだけでは負けるため（dev実測）、
   背景有効時のみ小さな磨りガラスチップを敷く。
   padding は素の 6px 8px（タップ領域25px）を下回らないこと（Codex #307 P2）。 */
.zeta-chat-shell.has-chat-bg .zeta-chat-copy-btn,
.zeta-chat-shell.has-chat-bg .zeta-chat-regenerate-btn {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 12px;
}

/* 背景有効時のみ: ノベルwrapper内のストリーミング実況と、エラー表示の可読性保護
   （Codex #307 P2 ×2。どちらも背景写真に直接乗り得るテキストのため磨りガラス地を敷く）。 */
.zeta-chat-shell.has-chat-bg .cast-novel-wrapper .zeta-chat-inline-thinking {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 10px;
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .cast-novel-wrapper .zeta-chat-inline-thinking {
  background: rgba(0, 0, 0, 0.58);
}

.zeta-chat-shell.has-chat-bg .zeta-chat-error {
  background: rgba(255, 241, 242, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-error {
  background: rgba(60, 12, 16, 0.88);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-copy-btn,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-regenerate-btn {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 1px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-copy-btn,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .zeta-chat-regenerate-btn {
  background: rgba(0, 0, 0, 0.45);
}

/* 締めカード（.cast-closing、通数上限に達したときの課金導線）の事実行とCTAは、上の
   ノベル地の文(.cast-novel-narration)・アシスタントバブル(.zeta-chat-bubble)と同じく
   背景写真に直接乗るのに、この2要素だけ磨りガラス処理が抜けていた（オーナー実機指摘
   2026-08-09、キャスト側課金導線モック検証で発覚）。締めカードは通数上限に達した瞬間に
   出る最重要の課金接点なので、読めないままでは致命的。値は新規に発明せず、
   .cast-novel-narration（7525行）の不透明度・ぼかし量・角丸をそのまま流用する。
   .cast-closing-note は本来 padding: 0 14px（バブルと字面を揃えるため）なので、
   縦方向だけ.cast-novel-narrationのpadding(8px 10px)から8pxを足す。 */
.zeta-chat-shell.has-chat-bg .cast-closing-note {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .cast-closing-note {
  background: rgba(0, 0, 0, 0.58);
}

/* .cast-closing-cta は .ghost-button（輪郭線ボタン、border/border-radius/paddingは
   既存のまま）なので、可読性に効く background と backdrop-filter だけを足す。
   形（ピル角丸・枠線）は変えない——18px角丸のパネル値をボタンに流用すると寸法が
   壊れるため、ここは .zeta-chat-bubble（7562行）の背景・ぼかし値だけを borrow する。 */
.zeta-chat-shell.has-chat-bg .cast-closing-cta {
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg .cast-closing-cta {
  background: rgba(0, 0, 0, 0.58);
}

/* enhanced は既存の panel を一段だけ不透明にする。背景そのものではなく、既に可読性を
   担保している各テキスト面だけを強めるので、画像の見え方とキャストの発言の区別を保つ。 */
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-novel-narration,
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-message-assistant .zeta-chat-bubble:not(.cast-novel-wrapper),
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-empty,
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-closing-note,
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-closing-cta {
  background: rgba(255, 255, 255, 0.78);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-novel-narration,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-message-assistant .zeta-chat-bubble:not(.cast-novel-wrapper),
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-empty,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-closing-note,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-closing-cta {
  background: rgba(0, 0, 0, 0.7);
}

.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-composer {
  background: rgba(255, 255, 255, 0.62);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-composer {
  background: rgba(0, 0, 0, 0.54);
}

.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-novel-wrapper .zeta-chat-inline-thinking,
.zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-error {
  background: rgba(255, 255, 255, 0.78);
}

:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .cast-novel-wrapper .zeta-chat-inline-thinking,
:root[data-theme="dark"] .zeta-chat-shell.has-chat-bg[data-chat-readability="enhanced"] .zeta-chat-error {
  background: rgba(0, 0, 0, 0.7);
}

/* 背景変更シート（features.background、「…」メニューから開く）。 */
.cast-chat-bg-options {
  display: flex;
  gap: 10px;
  padding: 4px 2px 12px;
}

.cast-chat-bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.cast-chat-bg-option-swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cast-chat-bg-option-swatch-none {
  color: var(--text-secondary);
  font-size: 16px;
}

.cast-chat-bg-option.active .cast-chat-bg-option-swatch {
  border-color: var(--accent, #4a90d9);
}

.cast-chat-bg-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 2px 12px;
}

.cast-chat-bg-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.cast-chat-bg-preset-swatch {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 2px solid var(--border);
}

.cast-chat-bg-preset.active .cast-chat-bg-preset-swatch {
  border-color: var(--accent, #4a90d9);
}

.cast-chat-bg-upload-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary, transparent);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

/* キャスト「表示設定」シート（背景シート内）。ZYNはこのクラスを持たないため影響しない。 */
.cast-chat-widget-root .cast-chat-display-settings {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cast-chat-widget-root .cast-chat-display-settings-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.cast-chat-widget-root .cast-chat-display-settings-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.cast-chat-widget-root .cast-chat-display-settings-range {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  block-size: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  accent-color: var(--primary);
  appearance: none;
  cursor: pointer;
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-card);
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--border-card);
  appearance: none;
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-card);
}

.cast-chat-widget-root .cast-chat-display-settings-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--border-card);
}

.cast-chat-widget-root .cast-chat-display-settings-range output {
  flex: 0 0 3.5em;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cast-chat-widget-root .cast-chat-display-settings-rate-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.cast-chat-widget-root .cast-chat-display-settings-rate-ticks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 1px;
  margin-right: calc(3.5em + 10px);
  padding: 0 11px;
  box-sizing: border-box;
  color: var(--text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cast-chat-widget-root .cast-chat-display-settings-field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.cast-chat-widget-root .cast-chat-display-settings-hint {
  margin: -8px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.cast-chat-widget-root .cast-chat-display-settings-field select:focus-visible,
.cast-chat-widget-root .cast-chat-display-settings-reset:focus-visible,
.cast-chat-widget-root .cast-chat-display-settings-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cast-chat-widget-root .cast-chat-display-settings-fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cast-chat-widget-root .cast-chat-display-settings-fieldset legend {
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.cast-chat-widget-root .cast-chat-display-settings-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  min-block-size: 40px;
  min-inline-size: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}

/* A small color swatch keeps each palette legible at a glance; the checked radio and ✓ still
   provide the selected-state cue, so color is never the only indicator. */
.cast-chat-widget-root .cast-chat-display-settings-choice::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid var(--border-card);
  border-radius: 4px;
  background: #0f1419;
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="blue"])::before {
  background: #d8eafe;
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="green"])::before {
  background: #ddf3e4;
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="pink"])::before {
  background: #fbe0e6;
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="purple"])::before {
  background: #e8e1f5;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="auto"])::before,
:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="mono"])::before {
  background: #334155;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="mono"])::before {
  background: #ffffff;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="blue"])::before {
  background: #1e3a5f;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="green"])::before {
  background: #1f4d3a;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="pink"])::before {
  background: #5b2636;
}

:root[data-theme="dark"] .cast-chat-widget-root .cast-chat-display-settings-choice:has(input[value="purple"])::before {
  background: #49345f;
}

.cast-chat-widget-root .cast-chat-display-settings-choice:hover,
.cast-chat-widget-root .cast-chat-display-settings-choice:has(input:checked) {
  background: var(--bg-hover);
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input:checked) {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  font-weight: 700;
}

.cast-chat-widget-root .cast-chat-display-settings-choice input {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.cast-chat-widget-root .cast-chat-display-settings-choice:has(input:checked)::after {
  content: "✓";
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.cast-chat-widget-root .cast-chat-display-settings-reset {
  justify-self: start;
  min-block-size: 36px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cast-chat-widget-root .cast-chat-display-settings-reset:hover {
  color: var(--text);
}

.cast-chat-widget-root .cast-chat-display-settings-reset:disabled,
.cast-chat-widget-root .cast-chat-display-settings-fieldset:disabled {
  cursor: default;
  opacity: 0.5;
}

@media (max-width: 420px) {
  .cast-chat-widget-root .cast-chat-display-settings-fieldset {
    grid-template-columns: 1fr;
  }
}

.zeta-chat-history-state {
  padding: 14px 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.zeta-chat-history-error {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(244, 33, 46, 0.08);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}

.zeta-chat-thread-entry {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.zeta-chat-thread-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 10px 10px 11px;
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  line-height: 1.35;
}

.zeta-chat-thread-item:hover {
  background: var(--bg-hover);
}

.zeta-chat-thread-item.active {
  background: var(--bg-secondary);
}


.zeta-chat-thread-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.zeta-chat-thread-meta {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.zeta-chat-error {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 33, 46, 0.1);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
}

.zeta-chat-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 18px;
  container-type: inline-size;
  container-name: zeta-chat-scroll;
}

.cast-chat-widget-root .zeta-chat-scroll:focus {
  outline: none;
}

/* 非Cast共用ウィジェットのChatGPT式スクロール用スペーサー。Cast V2では使わない。 */
.zeta-chat-scroll-spacer {
  flex-shrink: 0;
  width: 100%;
}

.zeta-chat-empty {
  margin: auto;
  display: grid;
  justify-items: center;
  padding: var(--s4) var(--s3);
  color: var(--text-secondary);
  text-align: center;
}

.zeta-chat-empty strong {
  color: var(--text);
  font-size: var(--type-section-size);
  font-weight: 600;
  letter-spacing: var(--type-heading-track);
}

.zeta-chat-empty p {
  margin: var(--s1) 0 var(--s3);
  font-size: var(--type-support-size);
  line-height: var(--type-line-height);
  color: var(--type-muted);
}

.zeta-chat-starter-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
}

/* 狭いコンテナ（デスクトップ右カラムの下限や極小画面幅）では1列にフォールバックする。 */
@container zeta-chat-scroll (max-width: 339px) {
  .zeta-chat-starter-list {
    grid-template-columns: 1fr;
  }
}

.zeta-chat-starter-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.zeta-chat-starter-icon {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.zeta-chat-starter-label {
  display: block;
}

.zeta-chat-starter-btn:hover {
  background: var(--bg-hover);
  border-color: rgba(13, 13, 13, 0.18);
  box-shadow: 0 4px 12px rgba(13, 13, 13, 0.07);
  transform: translateY(-1px);
}

.zeta-chat-starter-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
}

.zeta-chat-thinking-card {
  display: grid;
  gap: 8px;
  width: min(100%, 440px);
  padding: 14px 16px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(13, 13, 13, 0.05);
}

.zeta-chat-thinking-card.compact {
  width: 100%;
  padding: 12px 13px;
  border-radius: 16px;
  box-shadow: none;
}

.zeta-chat-thinking-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.zeta-chat-thinking-head strong {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-style: italic;
  font-weight: 520;
  opacity: 0.92;
}

.zeta-chat-thinking-detail {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.zeta-chat-thinking-next {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 12px;
  background: rgba(13, 13, 13, 0.03);
}

.zeta-chat-thinking-next-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.zeta-chat-thinking-next-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
}

.zeta-chat-thinking-next-copy strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.zeta-chat-thinking-next-copy > span {
  color: var(--text-secondary);
}

.zeta-chat-thinking-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zeta-chat-thinking-tool {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.zeta-chat-thinking-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.zeta-chat-thinking-steps li {
  position: relative;
  padding-left: 14px;
}

.zeta-chat-thinking-steps li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.zeta-chat-progress-timeline {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.zeta-chat-progress-timeline:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.zeta-chat-progress-entry {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  color: var(--text-secondary);
}

.zeta-chat-progress-entry::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: -10px;
  left: 6px;
  width: 1px;
  background: color-mix(in srgb, currentColor 22%, transparent);
}

.zeta-chat-progress-entry:last-child::before {
  display: none;
}

/* フェーズの定型文はいちだん控えめに、thought(モデルの内部出力)は読みやすい濃さに */
.zeta-chat-progress-entry.is-phase {
  color: var(--text-soft);
}

.zeta-chat-progress-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent);
}

.zeta-chat-progress-copy {
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.zeta-chat-progress-fold {
  margin-top: 8px;
}

.zeta-chat-progress-fold summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

.zeta-chat-progress-fold summary::-webkit-details-marker {
  display: none;
}

.zeta-chat-progress-fold summary::after {
  content: "▸";
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.15s ease;
}

.zeta-chat-progress-fold[open] summary::after {
  transform: rotate(90deg);
}

.zeta-chat-progress-fold summary:hover {
  background: var(--bg-hover);
}

.zeta-chat-progress-fold .zeta-chat-progress-timeline {
  margin-top: 8px;
}

.zeta-chat-thinking-anim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 10px;
  color: var(--primary);
  flex: 0 0 auto;
  transform: translateY(0.5px);
}

.zeta-chat-thinking-anim span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.2;
  animation: zeta-thinking-pulse 1.25s ease-in-out infinite;
}

.zeta-chat-thinking-anim span:nth-child(2) {
  animation-delay: 0.16s;
}

.zeta-chat-thinking-anim span:nth-child(3) {
  animation-delay: 0.32s;
}

.zeta-chat-inline-thinking {
  display: grid;
  gap: 6px;
  min-height: 16px;
  color: var(--text-secondary);
}

.zeta-chat-inline-thinking-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.zeta-chat-inline-thinking-head span:last-child {
  font-style: italic;
  font-weight: 520;
  opacity: 0.9;
}

.zeta-chat-pulse-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  animation: zeta-chat-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes zeta-chat-pulse-dot {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.zeta-chat-message {
  display: flex;
  max-width: min(100%, 760px);
  width: 100%;
  margin: 0 auto;
}

.zeta-chat-message-user {
  justify-content: flex-end;
}

.zeta-chat-message-assistant {
  justify-content: flex-start;
}

/* 運営トークルーム（.ai/current-task.md 2026-08-08）: role='staff'（運営の自由返信）。
   assistant（AI・地の文＝背景なし）と見分けられるよう、userと同じ吹き出し背景を流用する
   （新意匠は発明しない）。 */
.zeta-chat-message-staff {
  justify-content: flex-start;
}

.zeta-chat-message-staff .zeta-chat-bubble {
  background: var(--bg-secondary);
  color: var(--text);
}

/* .cast-msg-persona-name と同じ寸法（12px / 600 / --text-secondary / 下4px）を流用。 */
.zeta-chat-staff-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.zeta-chat-bubble {
  min-width: 0;
  max-width: min(88%, 680px);
  padding: 12px 14px;
  border-radius: 18px;
  background: transparent;
}

.zeta-chat-message-user .zeta-chat-bubble {
  background: var(--bg-secondary);
  color: var(--text);
}

:root[data-theme="dark"] .zeta-chat-message-user .zeta-chat-bubble {
  color: var(--text);
}

.zeta-chat-message.is-thinking .zeta-chat-bubble {
  display: grid;
  gap: 8px;
  max-width: min(92%, 520px);
  padding: 1px 0;
}

.zeta-chat-message-body {
  color: inherit;
  font-size: 15px;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.zeta-chat-message-body > :first-child {
  margin-top: 0;
}

.zeta-chat-message-body > :last-child {
  margin-bottom: 0;
}

.zeta-chat-message-body p,
.zeta-chat-message-body ul,
.zeta-chat-message-body ol,
.zeta-chat-message-body blockquote,
.zeta-chat-message-body pre,
.zeta-chat-message-body h1,
.zeta-chat-message-body h2,
.zeta-chat-message-body h3,
.zeta-chat-message-body h4,
.zeta-chat-message-body h5,
.zeta-chat-message-body h6 {
  margin: 0 0 10px;
}

.zeta-chat-message-body ul,
.zeta-chat-message-body ol {
  padding-left: 1.2em;
}

.zeta-chat-message-body li + li {
  margin-top: 4px;
}

.zeta-chat-message-body blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
}

.zeta-chat-message-body code {
  padding: 0.12em 0.38em;
  border-radius: 8px;
  background: var(--bg-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.zeta-chat-message-body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-secondary);
}

.zeta-chat-message-body pre code {
  padding: 0;
  background: transparent;
}

.zeta-chat-message-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* AI Cast（.ai/current-task.md 2026-07-15）: ノベル質感の地の文（*…*→<em>）用スタイル。
   chat-widget.js の rootClassName オプションで cast-chat-widget-root が付与されたときだけ
   効くスコープ付きセレクタなので、ZYN本体・bug-chatの .zeta-chat-message-body 既定スタイルには
   一切影響しない。 */
.cast-chat-widget-root .zeta-chat-message-body em {
  font-style: normal;
  color: var(--cast-action-text, var(--text-secondary));
}

.cast-chat-widget-root .zeta-chat-message-body p {
  margin: 0 0 14px;
}

/* 段落間隔(上記14px)がバブル内最終段落にも効くと、ユーザー発言の下に謎の余白が出る
   （2026-07-16 Discord報告）。最後の段落だけマージンを消す。 */
.cast-chat-widget-root .zeta-chat-message-body p:last-child {
  margin-bottom: 0;
}

/* AI Cast チャット zeta白版（.ai/current-task.md 2026-07-16 P5）。紙テーマ(P4)は全廃し
   トークン正本(CAST_DESIGN_TOKENS.md)の白版に統一。zeta-chat-*の各ルールはほぼ全て
   var(--bg)/var(--text)等の共通テーマ変数経由で色を出しているため、cast-chat-widget-root
   スコープでその変数を白系の値に上書きするだけで地色・本文色・送信ボタン(var(--primary)/
   var(--bg))まで揃う（ZYN本体・不具合報告チャットはこのクラスが付かないため無関係・不変）。
   ユーザーバブルだけは個別に上書きする。
   2026-07-17 オーナー指示でダーク対応を追加: このブロックはライト固定のまま変更しない
   （ライトモードの解決値をピクセル単位で維持するため）。ダーク値は下の
   :root[data-theme="dark"] .cast-chat-widget-root で上書きする（クラス数がこのブロック
   より多くCSS詳細度が高いため、ソース順に関わらずダーク時はそちらが勝つ）。ZYN本体・
   不具合報告チャットはこのクラスが付かないため今回のダーク対応でも無関係・不変。 */
.cast-chat-widget-root {
  --bg: #ffffff;
  --bg-secondary: #f6f6f7;
  --bg-hover: #f6f6f7;
  --border: #e7e7e9;
  --text: #1c1c1e;
  --text-secondary: rgba(0, 0, 0, 0.62);
  --text-soft: rgba(0, 0, 0, 0.45);
  --accent: #1c1c1e;
  --primary: #1c1c1e;
  --cast-user-bubble-bg: #0f1419;
  --cast-user-bubble-text: #ffffff;
  --cast-novel-bubble-bg: #f6f6f7;
}

:root[data-theme="dark"] .cast-chat-widget-root {
  --bg: #151516;
  --bg-secondary: #1d1d1f;
  --bg-hover: #1d1d1f;
  --border: #303033;
  --text: #e5e7eb;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-soft: rgba(255, 255, 255, 0.48);
  --accent: #ffffff;
  --primary: #ffffff;
  /* auto: reduce glare in dark mode while keeping white text legible. */
  --cast-user-bubble-bg: #334155;
  --cast-user-bubble-text: #ffffff;
  --cast-novel-bubble-bg: #1d1d1f;
}

/* Own-user bubble palette (表示設定). These variables live on the shell so only the live
   user's bubble inherits them. The screenshot exporter mounts outside the shell and therefore
   keeps its existing fixed light palette. Cast dialogue/narration use separate tokens and are
   deliberately not matched here. The frontend contract is data-chat-bubble-palette. */
.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="auto"] {
  --cast-user-bubble-bg: #0f1419;
  --cast-user-bubble-text: #ffffff;
}

.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="mono"] {
  --cast-user-bubble-bg: #0f1419;
  --cast-user-bubble-text: #ffffff;
}

.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="blue"] {
  --cast-user-bubble-bg: #d8eafe;
  --cast-user-bubble-text: #18324a;
}

.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="green"] {
  --cast-user-bubble-bg: #ddf3e4;
  --cast-user-bubble-text: #163b28;
}

.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="pink"] {
  --cast-user-bubble-bg: #fbe0e6;
  --cast-user-bubble-text: #4a1722;
}

.cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="purple"] {
  --cast-user-bubble-bg: #e8e1f5;
  --cast-user-bubble-text: #302043;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="auto"] {
  --cast-user-bubble-bg: #334155;
  --cast-user-bubble-text: #ffffff;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="mono"] {
  --cast-user-bubble-bg: #ffffff;
  --cast-user-bubble-text: #000000;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="blue"] {
  --cast-user-bubble-bg: #1e3a5f;
  --cast-user-bubble-text: #ffffff;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="green"] {
  --cast-user-bubble-bg: #1f4d3a;
  --cast-user-bubble-text: #ffffff;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="pink"] {
  --cast-user-bubble-bg: #5b2636;
  --cast-user-bubble-text: #ffffff;
}

:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-bubble-palette="purple"] {
  --cast-user-bubble-bg: #49345f;
  --cast-user-bubble-text: #ffffff;
}

.cast-chat-widget-root .zeta-chat-input-wrap {
  border-color: var(--border);
}

/* ユーザーバブル: ink地に白文字（トークン正本どおり。ダークは反転して白地に黒文字）。 */
.cast-chat-widget-root .zeta-chat-message-user .zeta-chat-bubble {
  background: var(--cast-user-bubble-bg);
  color: var(--cast-user-bubble-text);
  /* zeta比較パス3: 発言者側の上角を欠く吹き出し形（zeta実測 16px 0 16px 16px） */
  border-radius: 16px 0 16px 16px;
}

/* 自分の発言に出すペルソナのアイコンと名前（2026-07-29、fable相談）。
   castスコープ限定（ZYN本体・不具合報告チャットには漏らさない）。
   寸法32pxはノベルビューのセリフアバター（.cast-novel-dialogue-avatar）に揃えた——
   トーク行のアイコンは既にこの寸法で確立している。選択UIの48/40pxは持ち込まない
   （吹き出しより主張が強くなるため）。 */
/* 骨格はキャスト側（.cast-novel-dialogue）とまったく同じものを左右反転で使う
   （2026-07-29 オーナー指示「キャストと同じのを左右対称にやればいい」）。
   アイコンは吹き出しの隣ではなく「名前＋吹き出しの列」の隣に立つ。 */
.cast-chat-widget-root .zeta-chat-message-user.has-cast-persona {
  align-items: flex-start;
  gap: 8px;
}

/* .cast-novel-dialogue-content の鏡像。 */
.cast-chat-widget-root .cast-msg-persona-col {
  min-width: 0;
  max-width: min(88%, 620px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 幅を決めるのは列だけにする。吹き出し自身の max-width（min(88%,680px)）を残すと
   列の88%のさらに88%になり、短い文でも折り返してしまう
   （キャスト側も .cast-novel-dialogue-body に max-width を持たせていない）。 */
.cast-chat-widget-root .cast-msg-persona-col .zeta-chat-bubble {
  max-width: 100%;
}

.cast-chat-widget-root .cast-msg-persona-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」）。中身は.avatar-icon（DEFAULT_AVATAR_SVG）に揃える。 */
.cast-chat-widget-root .cast-msg-persona-avatar-blank {
  background: #cfd9de;
}

/* 連続発言の2通目以降。実体は描かず、右端を揃えるための幅だけ確保する。 */
.cast-chat-widget-root .cast-msg-persona-avatar-spacer {
  visibility: hidden;
}

/* .cast-novel-dialogue-name と同じ様式（12px / 600 / --text-secondary / 下4px）。 */
.cast-chat-widget-root .cast-msg-persona-name {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cast-persona-name-text, var(--text-secondary));
  text-shadow: var(--cast-persona-name-text-shadow, none);
}

/* Codex指摘(PR #273 P1): :root[data-theme="dark"] .zeta-chat-message-user .zeta-chat-bubble
   （styles.css内の共通ダークルール）はCSS詳細度が上記castルールより高く（pseudo-class+属性
   +class2つ）、ダーク時に color を var(--text) で上書きしてしまい白バブルに白文字になる。
   同等以上の詳細度でcastスコープ限定の上書きを追加し、常に --cast-user-bubble-text
   （ダークは黒）に固定する。 */
:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-message-user .zeta-chat-bubble {
  color: var(--cast-user-bubble-text);
}

/* AI Cast ノベルUI（.ai/current-task.md 2026-07-16, features.novelView 既定false）:
   ナレーション（*…*段落）はバブル外の全幅ブロック、セリフはアバター付きバブルで描画する。
   .cast-novel-wrapper / .cast-novel-* はnovelView時のみDOMに出るクラスなので、ZYN本体・
   不具合報告チャット・novelViewオフのcastの見た目には一切影響しない。 */
.zeta-chat-bubble.cast-novel-wrapper {
  max-width: 100%;
  width: 100%;
  padding: 0;
  background: transparent;
}

.cast-novel-blocks {
  display: grid;
  gap: 14px;
  width: 100%;
}

.cast-novel-narration {
  position: relative;
  margin: 0;
  /* セリフバブルの本文（アバター32px+gap8px）と左端を揃える（2026-07-21 オーナー指摘:
     アイコン付きセリフと地の文の開始位置がズレて見える）。空いたアバター列にはキャラアイコンと
     同格の32pxナレーターアイコン（本のグリフ）を置く。 */
  padding: 0 4px 0 40px;
  min-height: 32px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.cast-novel-narration-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--cast-narration-surface, var(--bg, #fff));
  color: var(--cast-narration-surface-text, var(--text-secondary));
}

.cast-novel-narration-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cast-novel-dialogue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* 雑談モードのキャストアイコン（2026-08-08）は**この寸法をそのまま共有**する。
   雑談は地の文分割を通さずプレーンな吹き出しで描くためノベル経路のアバターに乗れず、
   キャストのアイコンがどこにも出ていなかった。新しい径・新しい形は作らない。 */
.cast-novel-dialogue-avatar,
.cast-chat-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.cast-avatar-fallback-frame {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.cast-avatar-fallback-frame > :where(.cast-novel-dialogue-avatar, .cast-chat-avatar) {
  position: absolute;
  inset: 0;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」で線の円から変更）。中身は.avatar-icon
   （DEFAULT_AVATAR_SVG）に揃える。 */
.cast-chat-avatar-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cfd9de;
  overflow: hidden;
}

/* 運営トークルーム（peerAvatarHtml、2026-08-09）: ICON_ZYN_MARK(app.js)をこの円に流用する
   際のサイズ調整。ZマークSVGはviewBoxのみでwidth/height指定を持たないため、そのまま
   置くとブラウザ既定サイズで円からはみ出す。既存の.avatar-icon（人型シルエット、
   width/height 58%・fill白）とまったく同じ比率・配色に揃え、新しい寸法は作らない。
   このセレクタは.cast-chat-avatar-blankの中にネストしたときだけ効くため、
   .zyn-meta-btn .icon-zyn-mark（既存、別の用途）には影響しない。 */
.cast-chat-avatar-blank .icon-zyn-mark {
  width: 58%;
  height: 58%;
  fill: #fff;
  display: block;
}

/* 雑談の1行（アイコン＋吹き出し）。**ストーリーの .cast-novel-dialogue と同じ骨格**を使い、
   寸法・間隔もそちらに合わせる。外側の .zeta-chat-bubble は cast-novel-wrapper で透明に
   なり、吹き出しの見た目は内側の .zeta-chat-message-body が持つ（アイコンが吹き出しの
   塗りに含まれないようにするため）。 */
.cast-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* アイコンの隣に立つ「名前＋本文」の列。寸法はストーリーの .cast-novel-dialogue-content と
   同じものを共有する（min-width:0 は長文で列が潰れないため）。 */
.cast-chat-content {
  min-width: 0;
  max-width: min(88%, 620px);
}

.cast-chat-row > .zeta-chat-message-body {
  min-width: 0;
  max-width: min(88%, 620px);
}

.cast-novel-dialogue-content {
  min-width: 0;
  max-width: min(88%, 620px);
}

/* 雑談の話者名（2026-08-08）はストーリーの話者名と**同じ宣言を共有**する。
   新しい字送り・色・余白は作らない。 */
.cast-chat-name,
.cast-novel-dialogue-name {
  margin: 0 0 4px;
  color: var(--cast-name-text, var(--text-secondary));
  font-size: 12px;
  font-weight: 600;
}

/* 運営トークルーム（peerRoleBadges、2026-08-09）: AI/運営ラベルを名前の隣に並べる。
   .ai-badgeは既にinline-flexなのでそのままで揃うが、.zeta-chat-staff-labelは
   単独使用時（不具合報告チャットの旧レイアウト）はdisplay:blockで縦積みが前提のため、
   .cast-chat-nameにネストしたときだけinline化する（ネストしない従来の使い方は無変更）。 */
.cast-chat-name .ai-badge {
  margin-left: 6px;
}

.cast-chat-name .zeta-chat-staff-label {
  display: inline-block;
  margin: 0 0 0 6px;
  vertical-align: middle;
}

.cast-novel-dialogue-body {
  padding: 12px 14px;
  /* zeta比較パス3: キャラ側は左上を欠く（ユーザー側と対称） */
  border-radius: 0 16px 16px 16px;
  background: var(--cast-novel-bubble-bg, #f7f9f9);
  color: var(--text);
  font-size: 15px;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

/* 吹き出し内のインライン演出（*…*由来のem）を、セリフ本文と色で書き分ける（2026-08-08）。
   日本語フォントは真のイタリック字形を持たず、ブラウザの擬似斜体は字面をわずかに傾ける
   だけなので、斜体のみでは地の文とセリフがほとんど見分けられなかった（オーナー実機指摘）。
   zetaも同じ理由で斜体に頼らず色で書き分けている（docs/cast-chat-zeta-parity-design.md）。

   色は新規に定義せず、.cast-chat-widget-root が既に持っている --text-secondary を流用する
   （本文は --text = #0f1419 / #e7e9ea、演出は --text-secondary = #536471 / #8b98a5）。
   斜体は残す——色と傾きの二重の手がかりにするため、また色覚特性で色差が伝わりにくい
   場合の保険として。

   スコープはキャスト会話の吹き出し内だけ。.cast-novel-dialogue-body はノベルUIの
   セリフ本文専用のクラスなので、投稿本文・ZYN・不具合報告チャット（いずれも
   .zeta-chat-message-body / richTextHtml 側）のmarkdown emには一切影響しない。 */
.cast-novel-dialogue-body em {
  color: var(--cast-action-text, var(--text-secondary));
  font-style: italic;
}

.cast-chat-widget-root [data-chat-action-color-custom] .cast-novel-narration em {
  color: var(--cast-action-text, var(--text-secondary));
}

/* 共演・作品の話者分割（2026-08-04 オーナー指摘「変える必要のないところは旧来から変えないで」）:
   **話者分割専用の寸法・配置は持たない。**話者ごとの塊は 1:1 とまったく同じ
   .cast-novel-dialogue（アイコン32px + gap 8px + 吹き出し）で描かれるので、アイコン径も
   吹き出しの左端も行間も1人会話と同一のものがそのまま効く。ここに足すのは
   「アイコン画像が無い話者の代替」だけ。 */

/* 画像なしの話者。**寸法・形は .cast-novel-dialogue-avatar のものをそのまま使い**、
   中身はSNS本体の初期アバターと同じ塗り円＋.avatar-icon（DEFAULT_AVATAR_SVG）にする
   （2026-08-08 オーナー裁定「全部SNSの初期アイコンと同じに」。旧仕様の頭文字1字/
   モブの線画シルエットはどちらも廃止し、モブか名前ありかを問わず同じ絵柄にする）。
   アイコン列を空けてしまうと、その塊だけ吹き出しの左端が 40px→0px にずれるため、
   画像が無くても必ずこの円を置く。 */
.cast-novel-dialogue-avatar-blank {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #cfd9de;
}

/* スレッド読み込み中のプレースホルダ（2026-07-21 快適さバッチ）: 完全な白紙の代わりに
   アバター（あれば）＋ドット3つを出す。全チャット共通（cast/ZYN/不具合報告）。 */
.zeta-chat-loading-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}

.zeta-chat-loading-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.zeta-chat-loading-dots {
  display: inline-flex;
  gap: 5px;
}

.zeta-chat-loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.4;
  animation: zeta-chat-loading-dot 1.2s ease-in-out infinite;
}

.zeta-chat-loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.zeta-chat-loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes zeta-chat-loading-dot {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zeta-chat-loading-dots i {
    animation: none;
    opacity: 0.6;
  }
}

.zeta-chat-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  /* タップ領域の確保: 見た目位置を変えずに当たり判定だけ広げる（negative marginで相殺） */
  padding: 6px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
}

.zeta-chat-copy-btn:hover {
  color: var(--text);
}

/* features.regenerate（既定false=cast専用）。既存 .zeta-chat-copy-btn の隣に並ぶだけの
   追加要素で、features.regenerate未指定時はDOMにこの要素自体が出ないためZYN側は無影響。 */
.zeta-chat-regenerate-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  margin-left: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
}

.zeta-chat-regenerate-btn:hover {
  color: var(--text);
}

/* 指示付きリロール（2026-07-22）。.zeta-chat-regenerate-btnと同じ見た目・露出ルール。 */
.zeta-chat-reroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  margin-left: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
}

.zeta-chat-reroll-btn:hover {
  color: var(--text);
}

/* 再生成の残り回数・クールダウン秒数・30分休止の残り分（仕様1/2・追加仕様A・C1/C2、
   2026-08-23 オーナー実機前フィードバックでの再設計）。旧: ボタン中身のSVGを数字spanへ
   差し替える方式（.cast-regen-count/.cast-regen-count-clock）は廃止し、アイコンは常に残した
   まま右上に小さな数字バッジを重ねる方式にした（interface-contract.md §8）。
   .badge（通知バッジ、495行目付近）の意匠をそのまま流用: 寸法・角丸・背景色・文字色。
   .cast-regen-btn-wrap（ボタンの直前に足す position:relative の薄いラッパー。display:inline-flex
   で中身の1ボタンぶんの寸法にぴったり収まるためレイアウトは1pxも動かない）の中で、
   ボタン本体とは**兄弟**として置く——ボタンの子孫にすると、.is-regen-limited/:disabledで
   ボタンにopacityを掛けたときバッジまで一緒に薄まってしまう（罠1）。
   pointer-events:none にして、バッジの上をタップしてもクリックがすぐ下のボタンへ通り抜ける
   ようにする（イベント委譲は closest("[data-chat-action]") でボタンをたどるため、バッジが
   兄弟のままヒットすると素通りしてしまう）。 */
.cast-regen-btn-wrap {
  position: relative;
  display: inline-flex;
}

.cast-regen-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  position: absolute;
  top: -4px;
  right: -4px;
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="dark"] .cast-regen-badge {
  color: #000000;
}

/* バッジが出る3状態（残り回数1-4・0／クールダウン10秒／30分休止）はいずれもボタンを
   「タップはできるがいまは使えない」に見せる（罠4）。native disabled ではなくこのクラス＋
   aria-disabled="true" を使うことで、タップは regenerate() まで届き、その中の既存ガードが
   showToast で理由（30分休止なら「30分」を明記した文言）を出す。値は
   .cast-chat-actionbar-btn:disabled の opacity と同じ 0.35 を流用し、既存の「無効に見える」
   見た目と揃える。ストリーミング中の無効化は従来どおり native disabled のままでこのクラスは
   付かない＝混ざらない。 */
.zeta-chat-regenerate-btn.is-regen-limited,
.cast-chat-actionbar-btn.is-regen-limited {
  opacity: 0.35;
  cursor: default;
}

/* Pro日次ソフト上限(仕様3/C3、2026-08-22)の注記。.cast-closing-note/.cast-quota-note と
   同じトーン（12px・text-secondary）だが、.zeta-chat-bubble が既に padding:12px 14px を
   持つため左右paddingは足さない。regenSoftDowngradedMessageIdに一致するメッセージにだけ
   出るので、既定では要素自体がDOMに現れない＝他画面には無影響。 */
.cast-regen-downgrade-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.cast-chat-truncation-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #a15c00;
}

.cast-chat-truncation-code {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root[data-theme="dark"] .cast-chat-truncation-note {
  color: #fbbf24;
}

/* メッセージ操作の格納コンテナ（2026-07-22）: ZYN/不具合報告チャットでは従来通り
   自身はレイアウトに関与せず（display:contents）中の各ボタンがそのままインライン表示される。
   cast(.cast-chat-widget-root)だけ、下の規則でバブル右下に浮くミニアイコンバーに変わる。 */
.zeta-chat-message-actions {
  display: contents;
}

/* メッセージ操作の減灯（2026-07-21 快適さバッチ）→ 浮遊アイコンバー化（2026-07-22、castのみ）:
   コピー/再生成/指示付き再生成は常時露出をやめ、返信のタップ（chat-widget.js側で
   .show-actions をトグル）でバブル右下に浮くミニアイコンバーとして出す（もう一度タップで
   非表示）。ホバーできる環境ではホバーでも出す。ZYN本体/不具合報告チャットは
   .cast-chat-widget-root にマッチしないため不変。 */
.cast-chat-widget-root .zeta-chat-bubble {
  position: relative;
}

.cast-chat-widget-root .zeta-chat-message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.cast-chat-widget-root .zeta-chat-message-actions .zeta-chat-copy-btn,
.cast-chat-widget-root .zeta-chat-message-actions .zeta-chat-regenerate-btn,
.cast-chat-widget-root .zeta-chat-message-actions .zeta-chat-reroll-btn {
  margin: 0;
  padding: 6px;
}

.cast-chat-widget-root .zeta-chat-message.show-actions .zeta-chat-message-actions {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (hover: hover) {
  .cast-chat-widget-root .zeta-chat-message:hover .zeta-chat-message-actions {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

/* 選択肢の自動提案（zetaスイープ 2026-07-18、cast専用の揮発チップ）: 最新assistant応答の
   直下に「ユーザーの次の発言候補」を右寄せで積む。実発言バブルと混ざらないよう破線枠。 */
.cast-chat-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.cast-chat-choice-chip {
  max-width: 85%;
  text-align: left;
  overflow-wrap: anywhere;
  padding: 8px 12px;
  border: 1px dashed var(--text-soft);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.cast-chat-choice-chip:hover {
  background: var(--bg-hover);
}

/* trialMode（未ログイン体験チャット /trial、2026-07-30）: 登録CTAカード（5往復ごとの声かけ
   /20往復到達・レート上限での体験終了）と要望フォーム。会話の流れの中に差し込む1枚の
   バナーとして、通常のメッセージ吹き出しとは別の見た目にする（chat-widget.js
   renderTrialCtaHtmlが生成するマークアップに対応）。 */
.cast-trial-cta {
  margin: 4px 0 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}
.cast-trial-cta-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.cast-trial-cta-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 12px;
}
.cast-trial-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.cast-trial-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cast-trial-cta-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cast-trial-fb {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cast-trial-fb-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}
.cast-trial-fb-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 10px;
}
.cast-trial-fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 10px;
}
.cast-trial-fb-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 16px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.cast-trial-fb-chip.selected {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.cast-trial-fb-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: none;
}
.cast-trial-fb-send:disabled {
  opacity: 0.6;
  cursor: default;
}
/* サイドバーの「体験の状況」パネル（threadSidebar=trueだがスレッド一覧を持たないため、
   .zeta-chat-history-list の中身をこれに差し替える。chat-widget.js render()参照）。 */
.cast-trial-sidebar-info {
  padding: 4px 4px 12px;
}
.cast-trial-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.zeta-chat-message-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.zeta-chat-message-images img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 16px;
}

.zeta-chat-caret {
  display: inline-block;
  width: 7px;
  height: 1.2em;
  margin-left: 2px;
  border-radius: 999px;
  background: currentColor;
  vertical-align: -0.2em;
  animation: zeta-caret 900ms steps(2, jump-none) infinite;
}

.zeta-chat-composer {
  /* .zeta-chat-composer-status（画面下部中央のドット）をこの要素の上端基準で
     絶対配置するための位置基準。 */
  position: relative;
  width: min(100% - 24px, 760px);
  margin: 0 auto;
  display: grid;
  /* 明示的にminmax(0,1fr)にしないと暗黙列は"auto"(=max-content)扱いになり、
     nowrapな長文（C-lite添付チップの抜粋テキスト等）を含む子要素があると
     このグリッド列自体がその子要素のmax-content幅まで広がって画面外へ
     はみ出す（コンテナのwidth指定はそれを止めない）。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px 0 12px;
  background: var(--bg);
}

/* 無言の余白（quietWaitState=cast専用、.ai/current-task.md 2026-07-21）: メッセージ列の
   「……」インジケータを廃止し、入力欄のすぐ上・画面下部中央に常設するドット。
   pointer-events:noneで入力欄の操作を一切妨げない。JS側(render())がhidden属性を
   考え中/出力中の間だけ外す。 */
.zeta-chat-composer-status {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, var(--text) 6%);
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.08);
  pointer-events: none;
  z-index: 1;
}

.zeta-chat-composer-status[hidden] {
  display: none;
}

/* Castでは待機ドットをcomposer内の通常フローに置く。絶対配置でスクロール領域へ
   せり出さず、入力欄の上のアクションバーとともに独立した行を使うため、最後の返信を覆わない。
   共通ウィジェットの位置は変えない。 */
.cast-chat-widget-root .zeta-chat-composer-status {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0 auto;
}

.cast-chat-widget-root .zeta-chat-scroll > :first-child {
  margin-top: auto;
}

.cast-chat-widget-root .zeta-chat-scroll > .zeta-chat-message {
  flex-shrink: 0;
}

/* 色は常に --zeta-thinking-dot-1/2/3 経由で参照する（既定値は元の text-secondary と
   同一なので fast のときは1pxも変わらない）。「思考」中(is-thinking)だけ
   .zeta-chat-composer-status がこの3変数を上書きし、控えめな彩度の3色になる
   （2026-08-13、応答速度「思考」で待っている間だけの演出。Zetterはモノクロ基調のため
   原色のビビッドな虹は避け、彩度を落とした3色にとどめる。オーナーが差し替えたい場合は
   下の .is-thinking ブロックの3変数だけ触ればよい）。 */
.zeta-chat-composer-status-dot {
  color: var(--zeta-thinking-dot-1, var(--text-secondary));
  font-size: 15px;
  line-height: 1;
  opacity: 0.25;
  animation: zeta-composer-status-pulse 1.35s ease-in-out infinite;
}

.zeta-chat-composer-status-dot:nth-child(2) {
  color: var(--zeta-thinking-dot-2, var(--text-secondary));
  animation-delay: 0.18s;
}

.zeta-chat-composer-status-dot:nth-child(3) {
  color: var(--zeta-thinking-dot-3, var(--text-secondary));
  animation-delay: 0.36s;
}

/* ===== 「思考」中の紫の演出（2026-08-13） =====
   .zeta-chat-composer-status.is-thinking は「思考モード」のときだけ JS が付ける。待機して
   いない間は要素ごと hidden で消えるので光りっぱなしにならない。高速モードではこのクラスが
   一度も付かないため、下のルールは1つも当たらず見た目は完全に従来どおり（1pxも変わらない）。

   経緯: 当初は初投稿カードと同じ虹色を使っていたが、オーナー判断で取りやめた
   （「虹色だと目移りしすぎるから、濃い紫にしようかな」）。色数を1色に減らして落ち着かせ、
   動きだけは残すのが狙い。初投稿カードの虹（:root の --zetter-rainbow-*）はそのままで、
   ここが参照をやめただけ。

   見た目は**すべて下のCSS変数で決まる**ので、色・濃さ・発光・枠の太さ・速さは
   そこだけ触れば調整できる（実機での微調整の余地として残してある）。
     ::after = 中身の塗り（面）  … --zeta-thinking-fill-color-alpha で濃さを決める
     ::before = 枠のリング（線） … --zeta-thinking-border-width / glow で強さを決める
   紫の階調が横に流れるだけなので、点滅はしない（光過敏への配慮）。 */
.zeta-chat-composer-status.is-thinking {
  /* 紫の正本。#4a1f7a は Zetter に既にある紫（.cast-deco-bg-purple /
     .cast-about-box-purple の文字色）で、淡色 #f1e6ff と対で使われている。
     モノクロ基調のUIから浮かないよう、新しい色相は足さずこれ1色だけを使う。
     **色を変えたいときはこの1行だけ触ればよい**（塗り・枠・発光すべてここを参照する）。 */
  --zeta-thinking-purple: 74 31 122;
  --zeta-thinking-c5: rgb(var(--zeta-thinking-purple));
  --zeta-thinking-c6: rgb(var(--zeta-thinking-purple));
  /* --- ここから下が「見た目のつまみ」。実機で微調整するときはここだけ触る --- */
  /* 塗りの濃さ。紫は虹より暗いので、同じ数値でも体感はずっと濃い。ドットの色
     （--text-secondary）は据え置きなので、濃くしすぎるとドットが沈んで読めなくなる。
     下の2つの差が「濃淡」の振れ幅になり、同値にすると単色になる。 */
  --zeta-thinking-fill-color-alpha: 0.42; /* 塗りの濃い側（0=透明, 1=不透明） */
  --zeta-thinking-fill-color-alpha-min: 0.14; /* 塗りの淡い側（濃い側と同値なら単色） */
  --zeta-thinking-fill-alpha: 1;         /* 塗り全体の不透明度（微調整用） */
  --zeta-thinking-ring-alpha-min: 0.55;  /* 枠の淡い側（1にすると枠は単色になる） */
  --zeta-thinking-border-width: 2px;     /* 枠のリングの太さ */
  --zeta-thinking-glow-blur: 12px;       /* 発光のにじみ */
  --zeta-thinking-glow-alpha: 0.3;       /* 発光の強さ */
  --zeta-thinking-sheen-alpha: 0.5;      /* 横切る白い光の帯の強さ（0で消える） */
  --zeta-thinking-sheen-duration: 3.6s;  /* 光の帯が1往復する時間 */
  /* 帯幅と速さ。**帯幅 100% は禁止**（2026-08-13 に実測で判明したバグ）:
     background-position の % は「配置領域の幅 − 背景画像の幅」に対する割合なので、
     背景画像の幅がピル幅と同じ（＝100%）だとこの差が 0 になり、0%〜400% の
     どの値も同じ画素位置に解決される。つまり keyframes が完全な no-op になり、
     duration を何秒にしても虹はぴくりとも動かない（オーナーが「動いてる感じしない」と
     言ったのはこれが原因。速度だけ上げた前回の修正が効かなかったのもこれ）。
     200% にすると画像幅がピル幅の2倍になり差が生まれて実際に流れる。
     このとき共有keyframes（0%→400%）は画像2枚ぶん動くので、見た目の1周は
     duration の 1/2。3.6s → 見た目 1.8秒で1周。虹をやめて1色にした分、
     速さも落として「落ち着いているが止まってはいない」ところに置いている。
     一定速度で濃淡がずれるだけで点滅はしないので、光過敏の負担は増やさない。 */
  --zeta-thinking-band-size: 200%;
  --zeta-thinking-flow-duration: 3.6s;
  /* ドットの色は高速時と同じ（--text-secondary）に据え置く。演出はドットの見え方を
     変えないのが原則。もし紫の上で見えづらければ、ドット側ではなく上の
     --zeta-thinking-fill-color-alpha（塗りの濃さ）で調整すること。 */
  --zeta-thinking-dot-1: var(--text-secondary);
  --zeta-thinking-dot-2: var(--text-secondary);
  --zeta-thinking-dot-3: var(--text-secondary);

  /* 枠自体を光らせる: 外側に紫のソフトシャドウを出す。 */
  box-shadow:
    0 2px 10px rgba(13, 13, 13, 0.08),
    0 0 var(--zeta-thinking-glow-blur)
      color-mix(in srgb, var(--zeta-thinking-c5) calc(var(--zeta-thinking-glow-alpha) * 100%), transparent),
    0 0 calc(var(--zeta-thinking-glow-blur) * 1.8)
      color-mix(in srgb, var(--zeta-thinking-c6) calc(var(--zeta-thinking-glow-alpha) * 60%), transparent);
}

/* 中身の塗り（面）。opacity 1枚で濃さを決められるようにして、案の切り替えを変数1つにする。 */
.zeta-chat-composer-status.is-thinking::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: var(--zeta-thinking-fill-alpha);
  /* 塗りは紫1色の濃淡。ここでグラデーションを組み立てるのが要点 ——
     :root 側で組み立てた変数を使うと、その中の var(--...-alpha) は「宣言された要素」
     である :root の値で確定してしまい、子孫での上書きが効かない
     （カスタムプロパティ内の var() は宣言側で解決される）。擬似要素側で組み立てれば
     var() はここで解決されるので、上のつまみが正しく効く。 */
  background: linear-gradient(
    90deg,
    rgb(var(--zeta-thinking-purple) / var(--zeta-thinking-fill-color-alpha)),
    rgb(var(--zeta-thinking-purple) / var(--zeta-thinking-fill-color-alpha-min)) 50%,
    rgb(var(--zeta-thinking-purple) / var(--zeta-thinking-fill-color-alpha))
  );
  background-size: var(--zeta-thinking-band-size) 100%;
  background-repeat: repeat;
  pointer-events: none;
  /* keyframes も初投稿カードと共有する（first-post-rainbow-flow。400%ぶん流す） */
  animation: first-post-rainbow-flow var(--zeta-thinking-flow-duration) linear infinite;
}

/* ドットは塗りとリングより前面に出す（塗りに埋もれさせない）。 */
.zeta-chat-composer-status.is-thinking .zeta-chat-composer-status-dot {
  /* 塗り(::after)より前面に出すためだけの指定。**ドットの見え方そのものは高速時と完全に
     同一にする**（2026-08-13 オーナー指摘「もとあったやつはそのまま残してほしかった」）。
     以前はここで opacity/font-size/animation-name を上書きしていたが、パルスの振れ幅が
     0.25→1.0 から 0.55→1.0 に縮み、色付きの地の上では動いて見えなくなっていた。
     色・不透明度・サイズ・アニメーション（種類/長さ/遅延）はすべて元の規則のまま継承する。
     虹は「その上に足す」ものであって、ドットを置き換えるものではない。 */
  position: relative;
  z-index: 2;
}


/* ドットを囲む枠（ピル）を虹色のリングにする。
   実装: 角丸(999px)に沿ったリングを作るため、擬似要素にグラデーションを敷き、
   mask で内側をくり抜いて「枠だけ」を残す（border-image は border-radius に追随しないため）。
   背景位置を流すだけなので @property 非対応ブラウザでも動く。 */
.zeta-chat-composer-status.is-thinking::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--zeta-thinking-border-width);
  /* リングも同じ紫。線なので塗りより濃く出す（上の::afterと同じ理由でここで組み立てる）。 */
  background: linear-gradient(
    90deg,
    rgb(var(--zeta-thinking-purple)),
    rgb(var(--zeta-thinking-purple) / var(--zeta-thinking-ring-alpha-min)) 50%,
    rgb(var(--zeta-thinking-purple))
  );
  background-size: var(--zeta-thinking-band-size) 100%;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: first-post-rainbow-flow var(--zeta-thinking-flow-duration) linear infinite;
}

/* 横切る白い光の帯（sheen）。初投稿カードの ::before と同じ演出・同じ keyframes
   （first-post-sparkle-sweep）を、ピルでも使えるように専用の子要素として持つ。
   ピルの擬似要素は ::before=リング / ::after=塗り で既に埋まっているため要素を1つ足した。
   **この基本ルールには背景もアニメーションも書かない**ので、「思考」でないとき
   （高速モード）は幅ゼロの透明な要素として存在するだけで、見た目は1pxも変わらない。
   flex の gap に巻き込まれないよう position:absolute は無条件で当てる。 */
.zeta-chat-composer-status-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}

.zeta-chat-composer-status.is-thinking .zeta-chat-composer-status-sheen {
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgb(255 255 255 / var(--zeta-thinking-sheen-alpha)) 32%,
    transparent 44%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: first-post-sparkle-sweep var(--zeta-thinking-sheen-duration) ease-in-out infinite;
}

@keyframes zeta-composer-status-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zeta-chat-composer-status-dot {
    animation: none;
    opacity: 0.7;
  }
  /* 虹色演出（2026-08-13）: 色と発光はそのまま残し、動きだけ止める。
     枠のグラデーションは静止した虹として見える（消さない）。
     ドットは高速時と同じ扱い（上の共通ルールに任せる）なので、ここでは何も上書きしない。 */
  .zeta-chat-composer-status.is-thinking::before,
  .zeta-chat-composer-status.is-thinking::after {
    animation: none;
  }
  /* 光の帯は「横切ること」が演出の全部なので、止めるのではなく消す
     （animation:none だと帯が静止画として貼り付いたまま残ってしまう）。 */
  .zeta-chat-composer-status.is-thinking .zeta-chat-composer-status-sheen {
    animation: none;
    background: none;
  }
}

.zeta-chat-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: 26px;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(13, 13, 13, 0.06);
}

/* アスタリスク挿入ボタン（キャストのみ）がある時だけ4列にする。無条件に4列目を足すと、
   空トラックでも gap: 8px が入るため ZYN本体・不具合報告チャットの入力欄の右端に
   8pxの余白が増える（列は空でもトラック間の隙間は詰まらない）。 */
.zeta-chat-input-wrap:has(.zeta-chat-asterisk) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* Cast V2は生成中も送信と停止を並べる。停止ボタンは本体Castにだけ存在する。 */
.zeta-chat-input-wrap:has(.zeta-chat-stop) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.zeta-chat-input-wrap:has(.zeta-chat-asterisk):has(.zeta-chat-stop) {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.zeta-chat-attachments {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 4px;
}

.zeta-chat-attachment {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.zeta-chat-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zeta-chat-attachment button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.zeta-chat-attachments-host {
  min-width: 0;
}

/* C-lite添付カード: コンポーザー上の投稿添付チップ（投稿詳細「ZYNと話す」からの遷移） */
.zeta-chat-post-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  min-width: 0;
}

.zeta-chat-post-attachment-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.zeta-chat-post-attachment-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.zeta-chat-post-attachment-excerpt {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zeta-chat-post-attachment button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
}

.zeta-chat-post-attachment button:hover {
  background: var(--bg-hover);
}

/* C-lite添付カード: メッセージバブル内の引用カード（履歴・楽観メッセージ共通） */
.zeta-chat-quoted-post {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.zeta-chat-quoted-post-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.zeta-chat-quoted-post-excerpt {
  font-size: 13px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zeta-chat-attach-wrap {
  position: relative;
  flex: 0 0 auto;
}

.zeta-chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.zeta-chat-attach.disabled {
  opacity: 0.42;
  pointer-events: none;
}

.zeta-chat-tool-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  padding: 6px;
  border-radius: 16px;
  background: var(--bg-secondary);
  box-shadow: 0 4px 16px rgba(13, 13, 13, 0.12);
  border: 1px solid rgba(13, 13, 13, 0.08);
}

.zeta-chat-tool-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  white-space: nowrap;
}

.zeta-chat-tool-option:hover {
  background: var(--bg-secondary);
}

.zeta-chat-input {
  width: 100%;
  max-height: min(144px, var(--chat-input-max-height, 144px));
  min-height: 40px;
  padding: 9px 8px 7px;
  border: 0;
  background: transparent;
  color: var(--text);
  resize: none;
  line-height: 1.5;
}

.zeta-chat-input:focus-visible {
  outline: none;
}

/* キャストチャット専用（zetaパリティ）: タップでカーソル位置に半角*を1文字挿入するボタン。
   *text* が斜体（演出）になるための入力補助。ZYN本体・不具合報告チャットには出さない
   （features.novelView でHTML自体を出し分けているためCSS側は単純にモノクロで揃える）。 */
.zeta-chat-asterisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.zeta-chat-asterisk.disabled {
  opacity: 0.42;
  pointer-events: none;
}

.zeta-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--bg);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

:root[data-theme="dark"] .zeta-chat-send {
  color: #000;
}

.zeta-chat-send-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.zeta-chat-send-icon.is-send {
  font-size: 20px;
  font-weight: 900;
}

/* 続き生成（▶）。中身はLucideのplay SVGで、文字の↑と光学的な重さを揃えるため
   わずかに右へ寄せる（三角形は左に重心が寄って見えるため）。 */
.zeta-chat-send-play {
  display: block;
  transform: translateX(1px);
}

.zeta-chat-send:disabled {
  opacity: 0.42;
}

/* 入力が空のときは淡色（チップ相当）に、停止ボタンは常に濃色のまま表示する。 */
.zeta-chat-send.is-idle {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.zeta-chat-send.is-stop {
  background: var(--primary);
  color: var(--bg);
  opacity: 1;
}

:root[data-theme="dark"] .zeta-chat-send.is-stop {
  color: #000;
}

:root[data-theme="dark"] #cast-chat-view .zeta-chat-send:not(.is-idle) {
  background: #3d8bff;
  color: #f2f3f5;
}

.zeta-chat-send-stop-square {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}

.zeta-chat-composer-meta {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.zeta-chat-composer-meta.is-empty {
  min-height: 0;
}

/*
 * フェーズ別の色分けは廃止。zeta-chat-thinking-phase-* クラスは Zetter のモノクロ基調
 * (var(--primary) / var(--text) / var(--text-secondary)、いずれもライト/ダーク対応済み)
 * に統一されているベース定義 (.zeta-chat-thinking-anim / .zeta-chat-thinking-head strong /
 * .zeta-chat-inline-thinking-head span:last-child 付近) をそのまま継承する。
 * フェーズ識別用のフックとして DOM 上のクラス自体は残す。
 */

@keyframes zeta-message-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes zeta-caret {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes zeta-thinking-pulse {
  0%,
  100% {
    opacity: 0.24;
    transform: translateY(0) scale(0.9);
  }
  45% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zeta-chat-message,
  .zeta-chat-caret,
  .zeta-chat-thinking-anim span,
  .zeta-chat-pulse-dot {
    animation: none;
  }

  .zeta-chat-thinking-anim span {
    opacity: 0.7;
    transform: none;
  }

  .zeta-chat-pulse-dot {
    opacity: 0.8;
  }
}

.profile-bio {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}

.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.profile-name-row .profile-name {
  flex: 1;
  min-width: 0;
}

.profile-name-edit-spacer {
  display: none;
}

.profile-name-edit-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition);
}

.profile-name-edit-btn:hover {
  background: var(--bg-hover);
}

.profile-name-edit-btn .fa-solid {
  display: block;
  font-size: 12px;
  line-height: 1;
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.profile-website {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
}

.profile-website:hover {
  text-decoration: underline;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.04);
  color: rgba(13, 13, 13, 0.6);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

.ai-badge-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.cast-speaker-name-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
}

.cast-speaker-name-label > .display-name-text {
  flex: 0 1 auto;
}

.display-name-text + .ai-badge-cast-speaker {
  margin-inline-start: var(--s1);
  flex: 0 0 auto;
}

.post-meta-cast,
.post-meta-cast .post-meta-identity {
  align-items: center;
}

/* 引用カードのメタ行には通常投稿の .post-meta 用色指定が適用されないため、
   キャストタブのBOT印と同じテーマ文字色にする。器・背景・枠は共有 .ai-badge を使う。 */
.quoted-post-meta .ai-badge-cast-speaker {
  color: var(--text-secondary);
  font-size: 13px;
}

.first-post-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ff3b30,
    #ff9500,
    #ffcc00,
    #34c759,
    #00c7be,
    #007aff,
    #af52de,
    #ff3b30
  );
  background-size: 300% 100%;
  animation: first-post-chip-flow 4s linear infinite;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
}

.first-post-chip-icon {
  font-size: 11px;
  line-height: 1;
}

@keyframes first-post-chip-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .first-post-chip {
    animation: none;
  }
}

.profile-handle {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 2px 0 0;
}

.profile-join {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

/* 2026-08-03「キャスト」タブ追加で他人プロフィールも4タブになったため、3列固定gridを
   やめて本人プロフィールと同じ横スクロールflexに一本化した（gridのままだと4つ目が
   2段目へ折り返す）。タブが列幅に収まる限りは flex:1 1 0 で等幅になり、
   従来の3等分/2等分（検索タブ）の見た目は変わらない。 */
.profile-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

/* 本人プロフィールはポスト/返信/メディア/キャスト/いいね/ブックマークの6タブになる。
   「ブックマーク」等の長いラベルがセル内で改行しないよう min-width: max-content で
   1行・改行なしを維持する（X等の多タブUIと同じ方式）。 */
.profile-tabs .profile-tab {
  flex: 1 1 0;
  min-width: max-content;
  white-space: nowrap;
}

.profile-tab {
  position: relative;
  min-height: 48px;
  padding: 0 12px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}

.profile-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.profile-tab.active {
  color: var(--text);
}

.profile-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  max-width: calc(100% - 24px);
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--primary);
  transform: translateX(-50%);
}

.profile-tab:disabled {
  cursor: default;
}

.profile-tab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

/* タイムラインの「みんな / 推し」タブ。プロフィールのタブと同じ見え方に揃える。 */
.timeline-tabs-semantic {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.timeline-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* ログイン中は3等分、未ログインは「おすすめ / みんな」の2等分。 */
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  /* ヘッダーの真下に貼り付いて常に出したままにする。重なり順はヘッダー(20)より
     下・切り替え中の隣ページ(1)より上。隠れるときはヘッダーの裏に潜る。 */
  position: sticky;
  /* 実際のヘッダーの高さは端末やセーフエリアで変わるので、JS 側で実測して
     inline style の top を入れる。ここは未設定時の保険。 */
  top: var(--main-header-height);
  z-index: 15;
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s ease;
  will-change: transform;
}

.timeline-tabs.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timeline-tab-wrap {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.timeline-tab-wrap:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.timeline-tab-wrap.active {
  color: var(--text);
}

/* 下へスクロール中はヘッダーと一緒に引っ込む。ヘッダーぶんも足して上へ逃がさないと、
   ヘッダーが消えた跡にタブだけ残って浮いて見える。 */
body.main-header-hidden .timeline-tabs {
  transform: translate3d(0, calc(-100% - var(--main-header-height)), 0);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-tabs {
    transition: none;
  }
}

.timeline-tab {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  overflow: hidden;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.timeline-tab:hover {
  background: transparent;
}

.timeline-tab.active {
  color: inherit;
}

.timeline-tabs.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timeline-beta-mark {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.1em;
}

.cast-speaker-avatar-blurred,
.cast-detail-member.is-blurred .cast-speaker-avatar-blurred {
  filter: blur(7px);
}

.timeline-tab-filter-trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 48px;
  padding: 0;
  color: inherit;
}

.timeline-tab-filter-trigger:hover {
  background: transparent;
}

.timeline-tab-filter-trigger svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.timeline-tab-wrap.has-filter-trigger .timeline-tab { padding-inline: var(--s1) var(--s5); }

@media (max-width: 600px) {
  .timeline-tabs.is-four {
    grid-template-columns: 1.25fr 0.7fr 0.95fr 1.25fr;
  }
}

.timeline-tab-filter-trigger.has-active-filter::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% + 5px);
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
}

/* アクティブ側のバーはタブの幅いっぱい（画面の左半分/右半分まるごと）に伸ばす。
   プロフィールのタブのような中央寄せの短いバーにはしない（オーナー指定 2026-07-25）。 */
.timeline-tab-wrap.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--primary);
}

.timeline-tab:disabled {
  cursor: default;
}

.timeline-tab-filter-trigger:disabled {
  cursor: default;
}

@media (max-width: 360px) {
  .timeline-tab {
    padding: 0 3px;
    font-size: 14px;
  }

  .timeline-tab-filter-trigger {
    min-width: 30px;
  }
}

/* タブ切替時、新しいタイムラインを移動した向きから滑り込ませる。 */
/* タブ切り替えは、隣のページが横から入ってくるように画面幅ぶん動かす。
   取り直しを挟まなくなったので待ちが無く、動きだけで切り替わりが伝わる。 */
@keyframes timeline-list-enter-right {
  from { transform: translate3d(100%, 0, 0); opacity: 0.35; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes timeline-list-enter-left {
  from { transform: translate3d(-100%, 0, 0); opacity: 0.35; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* 画面幅ぶん動かすので、はみ出しで横スクロールが出ないように切り落とす。
   ただし常時かけてはいけない: overflow-x だけ clip にすると overflow-y が auto 扱いに
   なり、タイムラインが独立したスクロール面になってヘッダー下のタブの吸着位置が
   ずれる。動かしている間だけかける。 */
body.timeline-sliding #timeline-view {
  overflow-x: clip;
}

.timeline-list--enter-right {
  animation: timeline-list-enter-right 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

.timeline-list--enter-left {
  animation: timeline-list-enter-left 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-list--enter-right,
  .timeline-list--enter-left {
    animation: none;
  }
}

.profile-edit-card {
  padding: 0 0 8px;
  max-width: 640px;
  margin: 0 auto;
}

.profile-edit-header {
  padding: 12px 16px;
}

.profile-edit-cover-area {
  position: relative;
  width: 100%;
  height: 100px;
  background: var(--bg-secondary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-edit-cover-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.6);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background var(--transition);
}

.profile-edit-cover-btn:hover {
  background: rgba(15, 20, 25, 0.8);
}

.profile-edit-cover-btn .icon {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.profile-edit-panel {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 8px;
  margin-top: -28px;
  margin-bottom: 4px;
}

.profile-edit-form {
  padding: 0 8px;
}

.profile-edit-footer {
  padding: 0 8px;
}

.profile-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.profile-edit-meta-compact {
  flex: 1;
  text-align: center;
}

.profile-edit-meta-compact h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.profile-edit-meta-compact p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.profile-edit-header-spacer {
  width: 64px;
  flex: 0 0 64px;
}

.profile-edit-panel,
.profile-edit-form {
  border: none;
  border-radius: 0;
  background: transparent;
}

.profile-edit-form {
  margin-top: 4px;
  display: grid;
  gap: 14px;
}

.profile-edit-avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-edit-avatar-btn {
  position: relative;
  background: transparent;
  padding: 0;
  border-radius: 999px;
}

.profile-edit-avatar-btn .profile-avatar,
.profile-edit-avatar-btn img.profile-avatar {
  width: 72px;
  height: 72px;
}

.profile-edit-avatar-btn .profile-avatar {
  margin-bottom: 0;
}

.profile-edit-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--bg);
  border: 3px solid var(--bg);
}

.profile-edit-avatar-badge .fa-solid {
  font-size: 13px;
  line-height: 1;
}

.profile-edit-meta {
  text-align: center;
  margin-bottom: 0;
}

.profile-edit-avatar-copy {
  text-align: center;
}

.profile-edit-avatar-copy h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.profile-edit-avatar-copy p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.profile-edit-field {
  display: grid;
  gap: 2px;
}

.profile-edit-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.profile-edit-input {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}

.profile-edit-input:focus {
  border-bottom-color: var(--primary);
}

.profile-edit-textarea {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  resize: none;
  outline: none;
}

.profile-edit-textarea:focus {
  border-bottom-color: var(--primary);
}

.profile-edit-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.profile-edit-footer-spread {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-actions {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-actions .ghost-button {
  min-height: 44px;
}

.profile-edit-actions .btn-primary {
  min-height: 48px;
  padding-inline: 22px;
}

@media (max-width: 560px) {
  .profile-edit-card {
    padding: 0 0 8px;
  }

  .profile-edit-panel,
  .profile-edit-form {
    padding: 0 8px;
    border-radius: 0;
  }

  .profile-edit-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .profile-edit-actions .ghost-button,
  .profile-edit-actions .btn-primary {
    width: 100%;
  }

}

.profile-mute-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.profile-mute-section-header h3 {
  margin: 0;
  font-size: 16px;
}

.profile-mute-section-header p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.profile-mute-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.profile-mute-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.profile-mute-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-mute-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-mute-meta strong,
.profile-mute-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-mute-meta span {
  color: var(--text-secondary);
  font-size: 13px;
}

.bug-report-card {
  padding-top: 24px;
}

.bug-report-card .profile-edit-header {
  align-items: flex-start;
}

.bug-report-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bug-report-form .field input {
  border-radius: 18px;
}

.bug-report-textarea {
  min-height: 180px;
}

.bug-report-actions {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bug-report-visibility-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-soft);
}

.bug-report-visibility-option.disabled {
  opacity: 0.72;
}

.bug-report-visibility-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.bug-report-visibility-main input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.bug-report-image-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bug-report-image-preview-wrap {
  position: relative;
  width: min(100%, 420px);
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.bug-report-image-preview {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: var(--bg-secondary);
}

.bug-report-thanks-root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10010;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.bug-report-thanks-root.visible {
  opacity: 1;
}

.bug-report-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 30px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--success) 92%, white 8%);
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 32px rgba(13, 13, 13, 0.14);
  animation: bug-report-thanks-pop 2.8s ease forwards;
}

.bug-report-thanks-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.bug-report-thanks-message {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 900;
  line-height: 1.2;
}

@keyframes bug-report-thanks-pop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.88);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  22% {
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}

/* ===================================================================
   Post author link
   =================================================================== */

.post-author-link {
  cursor: pointer;
}

.post-author-link:hover {
  text-decoration: underline;
}

.post-detail-shell {
  border-bottom: 1px solid var(--border);
}

.post-detail-shell .post-item {
  border-bottom: none;
}

.thread-stack {
  position: relative;
}

.thread-node {
  position: relative;
}

.thread-node-connected::after {
  content: "";
  position: absolute;
  /* 縦線は「自ノードのアバター下端(52px)〜次ノードのアバター上端」のセグメント。
     次ノードのアバターはノード境界の6px下（.post-item > .avatar-link の
     margin-top: 6px）から始まるため、bottom を -6px にして余白でも途切れず
     アバター上端まで届かせる。線がアバターの上を貫通しないX式の見た目。 */
  top: 52px;
  bottom: -6px;
  left: 35px;
  width: 2px;
  background: var(--border);
}

.thread-post-item {
  position: relative;
  background: transparent;
}

.thread-node-current .thread-post-item {
  border-bottom: 1px solid var(--border);
}

.thread-reply-context {
  margin-bottom: 8px;
}

.thread-context-action-row {
  align-items: center;
}

.thread-context-comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.thread-context-comments .icon {
  width: 18px;
  height: 18px;
}

/* ===================================================================
   Empty state
   =================================================================== */

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ===================================================================
   Icons (SVG)
   =================================================================== */

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ===================================================================
   Toast
   =================================================================== */

.toast-root {
  position: fixed;
  bottom: calc(24px + var(--safe-area-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 32px);
}

.toast {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: #0d0d0d;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  box-shadow: var(--shadow-toast);
  pointer-events: auto;
  animation: toast-slide-up 0.2s ease-out;
}

.toast.error {
  background: var(--danger);
}

.toast.success {
  background: var(--success);
}

@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-root-top {
  top: calc(12px + var(--safe-area-top));
  bottom: auto;
}

.post-progress-root {
  position: fixed;
  top: calc(12px + var(--safe-area-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 32px);
}

.post-progress-root:empty {
  display: none;
}

.post-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary, #eff3f4);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  color: var(--text-secondary, #536471);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-toast);
  animation: toast-slide-up 0.2s ease-out;
}

.post-progress-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: post-progress-spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

/* ===================================================================
   Update banner
   =================================================================== */

.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(10px + var(--safe-area-top)) 16px 10px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
}

.update-banner .btn-primary,
.update-banner .btn-xs {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
}

.update-banner .btn-primary:hover,
.update-banner .btn-xs:hover {
  background: rgba(255, 255, 255, 0.85);
}

.pwa-promo-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10003;
}

.pwa-promo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(520px, calc(100% - 24px));
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(13, 13, 13, 0.08);
}

.pwa-promo-copy {
  min-width: 0;
}

.pwa-promo-copy strong {
  display: block;
  font-size: 14px;
}

.pwa-promo-copy span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.pwa-promo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pwa-promo-actions-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pwa-promo-close-inline {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pwa-promo-close-inline:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.pwa-promo-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.pwa-promo-check input {
  width: 16px;
  height: 16px;
}

.pwa-onboarding {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  padding: 24px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1);
  z-index: 10002;
}

.pwa-onboarding h2 {
  margin-top: 0;
  font-size: 22px;
  line-height: 1.25;
}

.pwa-onboarding p {
  margin-top: 10px;
  color: var(--text-secondary);
}

.pwa-onboarding-list {
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--text);
}

.pwa-onboarding-list li + li {
  margin-top: 8px;
}

.pwa-onboarding-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 14px;
}

.pwa-onboarding-check input {
  width: 16px;
  height: 16px;
}

.pwa-onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.pwa-onboarding-actions-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pwa-onboarding-close-inline {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pwa-onboarding-close-inline:hover {
  background: var(--bg-hover);
  color: var(--text);
}

@media (max-width: 700px) {
  .pwa-promo-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .pwa-promo-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .pwa-promo-actions-secondary {
    width: 100%;
  }

  .pwa-onboarding {
    width: calc(100% - 24px);
    padding: 22px 18px;
  }
}

/* ===================================================================
   [hidden] attribute support
   =================================================================== */

[hidden] {
  display: none !important;
}

/* ===================================================================
   Responsive: Tablet (700px – 1000px)
   =================================================================== */

@media (max-width: 1100px) {
  .rsidebar {
    display: none;
  }
}

/* 横長(landscape) + 1000px以下 のときだけアイコンのみのナロー・サイドバーにする。
   縦長(portrait) は下の portrait ブロックでサイドバーごと非表示にし、ボトムバーUIに統一する。 */
@media (max-width: 1000px) and (orientation: landscape) {
  .sidebar {
    width: 88px;
    align-items: center;
  }

  .sidebar-inner {
    width: auto;
    align-items: center;
  }

  .snav-label {
    display: none;
  }

  /* この幅ではナビもボタンも文字を落としてアイコンだけにしているのに、
     ロゴの「ゼッター」だけ落とし忘れていた（ユーザー報告 2026-07-27 @vex）。
     88px（実効64px）に22pxの4文字は入らず、1文字ずつ折り返されて縦に並ぶ。
     縦書きではなく、ただの折り返し。Zマーク（.logo-mark-image）は残るので
     ブランドは保たれる。 */
  .logo-wordmark {
    display: none;
  }

  .logo-link {
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .snav-item {
    justify-content: center;
    padding: 12px;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-pill);
  }

  .compose-btn-large {
    width: 50px;
    height: 50px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    gap: 0;
  }

  .compose-btn-large-label {
    display: none;
  }

  .compose-btn-large-icon {
    width: auto;
    height: auto;
  }

  .sidebar-user-inner {
    flex-direction: column;
    gap: 8px;
  }

  .sidebar-user-info {
    display: none;
  }

  .sidebar-user .ghost-button {
    font-size: 0;
    padding: 10px;
  }

  .main {
    flex: 1;
  }
}

/* ===================================================================
   Responsive: Mobile (<700px) または 縦長デバイス(<=1100px)
   iPad縦/大画面スマホ縦などをスマホUI(ボトムバー)に統一する。
   =================================================================== */

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
  :root {
    --main-header-height: 65px;
    --app-bottom-offset: calc(54px + var(--safe-area-bottom));
  }

  #profile-edit-save-btn-bottom {
    display: none;
  }

  .sidebar {
    display: none;
  }

  .sidebar.sidebar-overlay-open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 55;
    width: min(320px, calc(100vw - 52px));
    height: 100dvh;
    padding: 0;
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(13, 13, 13, 0.08);
    overflow-y: auto;
  }

  .sidebar.sidebar-overlay-open .sidebar-inner {
    width: 100%;
    height: 100%;
    align-items: stretch;
    padding: 16px 0;
  }

  .sidebar.sidebar-overlay-open .logo-link {
    display: none;
  }

  .sidebar.sidebar-overlay-open .sidebar-nav {
    display: none;
  }

  .sidebar.sidebar-overlay-open .snav-label {
    display: inline;
  }

  .sidebar.sidebar-overlay-open .snav-item {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .sidebar.sidebar-overlay-open .compose-btn-large {
    display: none !important;
  }

  .sidebar.sidebar-overlay-open .sidebar-user-inner {
    display: none;
  }

  .sidebar.sidebar-overlay-open .sidebar-user-info {
    display: none;
  }

  .sidebar.sidebar-overlay-open .sidebar-user-legal {
    margin-top: 0;
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
  }

  .sidebar.sidebar-overlay-open .sidebar-user {
    margin-top: 0;
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
  }

  .sidebar.sidebar-overlay-open .sidebar-guest-panel {
    padding: 0 16px;
  }

  .sidebar.sidebar-overlay-open .sidebar-guest-legal-footer {
    margin-top: auto;
    padding: 20px 16px 0;
  }

  .sidebar.sidebar-overlay-open .sidebar-overlay-account,
  .sidebar.sidebar-overlay-open .sidebar-overlay-menu {
    padding: 0 16px;
  }

  .rsidebar {
    display: none;
  }

  .app {
    display: block;
  }

  .main {
    width: 100%;
    border-left: none;
    border-right: none;
  }

  body {
    padding-bottom: calc(54px + var(--safe-area-bottom));
  }

  :root {
    --chat-bottom-nav-height: calc(54px + var(--safe-area-bottom));
  }

  body.chat-view-active {
    padding-bottom: 0;
  }

  .bottom-nav {
    display: flex;
  }

  .fab:not([hidden]) {
    display: flex;
    bottom: calc(72px + var(--safe-area-bottom));
    right: 16px;
  }

  .toast-root {
    bottom: calc(70px + var(--safe-area-bottom));
  }

  .main-header {
    padding: 10px 16px;
  }

  .header-title {
    font-size: 18px;
  }

  .header-brand-logo {
    /* 左右のヘッダーアイコン(40px)と見た目を統一（枠40px+scaleでグリフ比率補正） */
    width: 40px;
    height: 40px;
  }

  .header-brand-wrap {
    gap: 6px;
  }

  .server-badge {
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
  }

  .post-item {
    padding: 0 16px 8px;
  }

  .notif-item {
    padding: 12px 16px;
  }

  .comments-panel {
    padding-left: 0;
  }

  .repost-label {
    padding-left: 16px;
  }

  .compose-section {
    top: var(--compose-viewport-offset-top);
    height: var(--compose-viewport-height);
  }

  .compose-sheet-body {
    width: 100%;
    padding: 14px 16px 12px;
  }

  .compose-form textarea {
    min-height: 4.8em;
    max-height: min(46vh, 320px);
    font-size: 18px;
  }

  .compose-footer {
    padding: 0 20px max(12px, var(--safe-area-bottom));
  }

  .compose-image-preview {
    max-height: 300px;
  }
}

/* 「デスクトップ扱い」のレイアウト。横長で 701px 以上、または十分広い 1101px 以上のとき効かせる。
   縦長 + 〜1100px は上のスマホ扱いブロックの内容を優先するため、ここから除外する。 */
@media (min-width: 701px) and (orientation: landscape), (min-width: 1101px) {
  :root {
    --main-header-height: 0px;
  }

  .main-header {
    display: none;
  }

  .compose-section.compose-section-pinned {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    max-height: none;
    transform: none;
    pointer-events: auto;
    overflow: visible;
    z-index: 1;
    border-bottom: 1px solid var(--border);
  }

  .compose-section.compose-section-pinned .compose-sheet-handle {
    display: none;
  }

  .compose-section.compose-section-pinned .compose-sheet-header {
    display: none;
  }

  .compose-section.compose-section-pinned .compose-close-btn,
  .compose-section.compose-section-pinned .compose-sheet-header-spacer {
    display: none;
  }

  .compose-section.compose-section-pinned .compose-reply-context {
    width: 100%;
    padding: 8px 16px 0;
  }

  .compose-section.compose-section-pinned .compose-sheet-body,
  .compose-section.compose-section-pinned[data-compose-keyboard="closed"] .compose-sheet-body {
    width: 100%;
    margin: 0;
    gap: 10px;
    padding: 10px 16px 6px;
    overflow: visible;
    flex: 0 0 auto;
  }

  .compose-section.compose-section-pinned .avatar-sm {
    width: 36px;
    height: 36px;
  }

  .compose-section.compose-section-pinned .compose-form,
  .compose-section.compose-section-pinned[data-compose-keyboard="closed"] .compose-form {
    min-height: 0;
    height: auto;
  }

  .compose-section.compose-section-pinned .compose-editor-stage {
    min-height: 0;
    height: auto;
  }

  .compose-section.compose-section-pinned .compose-form textarea,
  .compose-section.compose-section-pinned[data-compose-keyboard="closed"] .compose-form textarea {
    min-height: 3.2em;
    height: auto;
    max-height: 180px;
    padding: 4px 0 8px;
    font-size: 17px;
    flex: 0 0 auto;
  }

  /* pinned + インラインプレビュー（引用/画像/音楽）表示時は textarea のキャップを外し、
     入力中にキャレットが180px枠外へ隠れるのを防ぐ */
  .compose-section.compose-section-pinned:has(.compose-inline-preview-stack > :not([hidden])) .compose-form textarea {
    max-height: none;
  }

  .compose-section.compose-section-pinned .compose-footer {
    padding: 0 16px 8px;
  }

  .compose-section.compose-section-pinned .compose-actions {
    width: 100%;
    justify-content: space-between;
  }

  .fab:not([hidden]) {
    display: none;
  }

  .search-page-form-wrap {
    display: block;
    position: sticky;
    top: 0;
    z-index: 18;
    padding: 14px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
}

/* ===================================================================
   Scrollbar styling (thin, subtle)
   =================================================================== */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ===================================================================
   Sound toggle — profile page button
   =================================================================== */

/* Profile sound toggle styles moved to .profile-sound-btn */

/* ===================================================================
   PhotoSwipe tweaks
   =================================================================== */
.pswp {
  --pswp-bg: rgba(0, 0, 0, 0.92);
}

.pswp__img {
  border-radius: 6px;
}

.pswp .pswp__button--zoom,
.pswp--zoom-allowed .pswp__button--zoom {
  display: none !important;
}

/* ===================================================================
   Crop Modal (Cropper.js)
   =================================================================== */

.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
  display: flex;
  flex-direction: column;
}

.crop-modal[hidden] {
  display: none;
}

.crop-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.crop-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 「キャンセル」「完了」も画面の左右端に寄せない（同じくジェスチャー誤爆を避ける）。 */
  padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left));
  background: #000;
  color: #fff;
  flex-shrink: 0;
}

.crop-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.crop-modal-cancel {
  background: none;
  border: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
}

.crop-modal-cancel:hover {
  opacity: 0.75;
}

.crop-modal-header .header-save-btn {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

/* 切り抜き領域を画面の端まで広げない（2026-07-26 オーナー指摘）。
   スマホは画面の縁がOSのジェスチャーに取られている——Androidの戻るは左右端から
   20〜24dp、下端はホームバー。そこに切り抜き枠のハンドルが重なると、枠を掴んだつもりが
   ブラウザバックやホームに飛ぶ。とくに右下の角が事故りやすい。
   なので内側に余白を置いて、枠がOSの領域に届かないようにする。
   env(safe-area-inset-*) はノッチ/ホームインジケータぶんしか見てくれず、Androidの
   ジェスチャー帯は含まれないため、固定値との max を取る。 */
.crop-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 切り抜きの実体はこの内枠の中だけ。Cropperはこの箱の大きさに合わせてコンテナを作るので、
   画面の縁（Androidの戻るジェスチャー帯・ホームバー）にハンドルが届かなくなる。
   親のpaddingで逃がす手も試したが、Cropperがpaddingを無視して画面幅でコンテナを作り、
   右側が22pxはみ出した（実測: left +22 / right -22）。実体のある箱が要る。 */
.crop-modal-stage {
  position: relative;
  width: calc(100% - max(44px, calc(env(safe-area-inset-left) + env(safe-area-inset-right))));
  height: calc(100% - max(36px, calc(8px + env(safe-area-inset-bottom))));
  margin: 8px auto max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.compose-video-trim-modal {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.compose-video-trim-modal[hidden] {
  display: none;
}

.compose-video-trim-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.compose-video-trim-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  flex-shrink: 0;
}

.compose-video-trim-title {
  min-width: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.compose-video-trim-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.compose-video-trim-cancel:hover {
  opacity: 0.75;
}

.compose-video-trim-header .header-save-btn {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.compose-video-trim-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
}

.compose-video-trim-preview {
  position: relative;
  width: min(100%, 720px);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  max-height: min(60vh, 620px);
  background: #050505;
  overflow: hidden;
}

.compose-video-trim-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

.compose-video-trim-play-btn {
  position: absolute;
  inset: auto 16px 16px auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.compose-video-trim-play-btn:hover {
  background: rgba(0, 0, 0, 0.78);
}

.compose-video-trim-controls {
  width: min(100%, 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compose-video-trim-range-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.compose-video-trim-time {
  white-space: nowrap;
}

/* X風トリマー: フィルムストリップ（必要時に横スクロール）＋ブラケット選択窓 */
.compose-video-trim-range-shell {
  position: relative;
  height: 64px;
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-x;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #050505;
}

.compose-video-trim-range-shell.is-zoomed {
  overflow-x: auto;
}

.compose-video-trim-range-shell::-webkit-scrollbar {
  display: none;
}

.compose-video-trim-track {
  position: relative;
  height: 100%;
  min-width: 100%;
}

.compose-video-trim-filmstrip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  right: 22px;
  display: flex;
  z-index: 1;
  background: #111;
}

.compose-video-trim-filmstrip-frame {
  height: 100%;
  flex: 0 0 auto;
  object-fit: cover;
  background: #1a1a1a;
  pointer-events: none;
  display: block;
}

.compose-video-trim-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.compose-video-trim-mask-left {
  left: 0;
  width: 0;
}

.compose-video-trim-mask-right {
  right: 0;
  left: auto;
  width: 0;
}

.compose-video-trim-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 3;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}

/* 上下のバーは両端のつまみ（選択範囲の外側）をつなぐ。つまみの角は別途丸める。 */
.compose-video-trim-window::before,
.compose-video-trim-window::after {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  height: 4px;
  background: #c4c6f5;
  z-index: 4;
}

.compose-video-trim-window::before {
  top: 0;
}

.compose-video-trim-window::after {
  bottom: 0;
}

.compose-video-trim-window:active {
  cursor: grabbing;
}

.compose-video-trim-range-input {
  display: none;
}

/* ブラケット（両端の縦長ハンドル） */
.compose-video-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  background: #c4c6f5;
  border: none;
  padding: 0;
  z-index: 4;
  cursor: ew-resize;
  touch-action: none;
}

.compose-video-trim-handle::before {
  /* 当たり判定を左右に広げる */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: -8px;
}

.compose-video-trim-handle::after {
  /* 黒い山型矢印（シェブロン） */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-style: solid;
  border-color: #1a1a1a;
  border-width: 2.5px 2.5px 0 0;
}

.compose-video-trim-handle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.compose-video-trim-handle-start {
  left: -22px;
  z-index: 5;
  border-radius: 8px 0 0 8px;
}

.compose-video-trim-handle-start::after {
  /* 左向き ‹ */
  transform: translate(-30%, -50%) rotate(-135deg);
}

.compose-video-trim-handle-end {
  right: -22px;
  z-index: 6;
  border-radius: 0 8px 8px 0;
}

.compose-video-trim-handle-end::after {
  /* 右向き › */
  transform: translate(-70%, -50%) rotate(45deg);
}

.compose-video-trim-zoom-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.compose-video-trim-zoom-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.compose-video-trim-zoom-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

.compose-video-trim-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.settings-home-screen {
  display: flex;
  flex-direction: column;
}

.header-logo-link.header-settings-home-slot {
  width: 100%;
  justify-self: stretch;
  justify-content: flex-start;
  cursor: default;
  min-width: 0;
}

.header-settings-home-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.header-settings-home-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header-settings-home-handle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.settings-home-list {
  display: flex;
  flex-direction: column;
}

.settings-home-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.12s ease;
}

.settings-home-item:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.settings-home-item:focus-visible {
  outline: 2px solid var(--accent, #1d9bf0);
  outline-offset: -2px;
}

.settings-home-item-icon {
  flex: 0 0 auto;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

.settings-home-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-home-item-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.settings-home-item-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #6b7280);
  word-break: break-word;
}

.settings-home-item-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9ca3af);
  font-size: 13px;
  margin-top: 4px;
}

.settings-home-item-danger .settings-home-item-icon,
.settings-home-item-danger .settings-home-item-title {
  color: #d93025;
}

/* Supporter checkout success ------------------------------------------------ */
.supporter-thanks-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(var(--bg, #fff), var(--bg, #fff)) padding-box,
    linear-gradient(135deg, #c62828, #c75b00, #8a7000, #087f23, #0067b1, #6a1b9a) border-box;
  color: var(--text, #17202a);
  box-shadow: 0 24px 72px rgba(23, 32, 42, 0.34), 0 0 0 5px rgba(96, 71, 172, 0.16);
}

.supporter-thanks-dialog::backdrop {
  background: rgba(22, 29, 39, 0.62);
}

.supporter-thanks-content {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 250px;
  padding: 26px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, rgba(198, 40, 40, 0.18), transparent 35%),
    radial-gradient(circle at 72% 98%, rgba(138, 112, 0, 0.16), transparent 38%),
    radial-gradient(circle at 8% 88%, rgba(8, 127, 35, 0.15), transparent 37%),
    radial-gradient(circle at 16% 4%, rgba(0, 103, 177, 0.14), transparent 34%),
    radial-gradient(circle at 94% 76%, rgba(106, 27, 154, 0.14), transparent 35%),
    var(--bg, #fff);
}

.supporter-thanks-confetti,
.supporter-thanks-confetti::before,
.supporter-thanks-confetti::after {
  position: absolute;
  inset: -18%;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, #e53935 0 3px, transparent 3.5px),
    radial-gradient(circle, #fb8c00 0 3px, transparent 3.5px),
    radial-gradient(circle, #c6a000 0 3px, transparent 3.5px),
    radial-gradient(circle, #18a84b 0 3px, transparent 3.5px),
    radial-gradient(circle, #1e88e5 0 3px, transparent 3.5px),
    radial-gradient(circle, #8e24aa 0 3px, transparent 3.5px);
  background-size: 78px 78px, 116px 116px, 94px 94px, 132px 132px, 104px 104px, 150px 150px;
  background-position: 4px 12px, 32px 50px, 72px 4px, 12px 86px, 84px 98px, 120px 28px;
  opacity: 0.65;
  animation: supporter-confetti-drift 8s linear infinite;
}

.supporter-thanks-confetti::before {
  transform: rotate(42deg) scale(1.15);
  opacity: 0.3;
  animation-duration: 11s;
}

.supporter-thanks-confetti::after {
  transform: rotate(-28deg) scale(0.9);
  opacity: 0.28;
  animation-duration: 14s;
}

.supporter-thanks-video {
  display: block;
  width: 132px;
  height: 235px;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, #fff 75%, var(--border, #d8dde3));
  border-radius: 12px;
  background: var(--bg-secondary, #f4f7f9);
  box-shadow: 0 12px 28px rgba(23, 32, 42, 0.2);
}

.supporter-thanks-message {
  min-width: 0;
}

.supporter-thanks-kicker {
  margin: 0 0 6px;
  color: #6a1b9a;
  background: linear-gradient(90deg, #c62828, #c75b00, #8a7000, #087f23, #0067b1, #6a1b9a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.supporter-thanks-message h2 {
  margin: 0;
  color: #6a1b9a;
  background: linear-gradient(105deg, #c62828, #c75b00, #8a7000, #087f23, #0067b1, #6a1b9a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-wrap: balance;
  animation: supporter-thanks-pop 700ms cubic-bezier(0.2, 1.35, 0.45, 1) both;
}

.supporter-thanks-message p:not(.supporter-thanks-kicker) {
  margin: 12px 0 0;
  color: var(--text-secondary, #536471);
  font-size: 14px;
  line-height: 1.55;
}

.supporter-thanks-actions {
  grid-column: 1 / -1;
  margin: 0;
}

.supporter-thanks-close {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #a91f25, #a64b00, #756000, #087334, #005b9c, #5d187d);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.supporter-thanks-close:hover {
  background: linear-gradient(100deg, #8d181d, #893d00, #5f4e00, #075f2b, #004c82, #4b1365);
}

.supporter-thanks-close:focus-visible {
  outline: 3px solid var(--accent, #1d9bf0);
  outline-offset: 3px;
}

@keyframes supporter-confetti-drift {
  to { transform: translate3d(24px, -32px, 0); }
}

@keyframes supporter-thanks-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

:root[data-theme="dark"] .supporter-thanks-dialog {
  background:
    linear-gradient(var(--bg, #15202b), var(--bg, #15202b)) padding-box,
    linear-gradient(135deg, #ef5350, #ff9800, #d4b000, #42bd68, #42a5f5, #ab47bc) border-box;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(144, 76, 182, 0.22);
}

:root[data-theme="dark"] .supporter-thanks-content {
  background:
    radial-gradient(circle at 92% 8%, rgba(239, 83, 80, 0.2), transparent 35%),
    radial-gradient(circle at 72% 98%, rgba(212, 176, 0, 0.14), transparent 38%),
    radial-gradient(circle at 8% 88%, rgba(66, 189, 104, 0.14), transparent 37%),
    radial-gradient(circle at 16% 4%, rgba(66, 165, 245, 0.14), transparent 34%),
    radial-gradient(circle at 94% 76%, rgba(171, 71, 188, 0.14), transparent 35%),
    var(--bg, #15202b);
}

:root[data-theme="dark"] .supporter-thanks-kicker,
:root[data-theme="dark"] .supporter-thanks-message h2 {
  color: #ea80fc;
  background-image: linear-gradient(90deg, #ff8a80, #ffcc80, #fff176, #80e27e, #90caf9, #ea80fc);
}

:root[data-theme="dark"] .supporter-thanks-video {
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 430px) {
  .supporter-thanks-content {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 20px;
  }

  .supporter-thanks-video {
    width: 100px;
    height: 178px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .supporter-thanks-confetti,
  .supporter-thanks-confetti::before,
  .supporter-thanks-confetti::after,
  .supporter-thanks-message h2 {
    animation: none;
  }

  .supporter-thanks-close {
    transition: none;
  }
}

.account-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  padding: 16px;
}

.account-delete-modal {
  background: var(--bg, #fff);
  color: inherit;
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-delete-confirm-modal {
  max-width: 480px;
}

.post-delete-confirm-details {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.is-post-deleting {
  display: none !important;
}

.posting-rules-modal {
  width: min(100%, 560px);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
}

.posting-rules-summary,
.posting-rules-legal-note,
.posting-rules-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.posting-rules-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 14px;
  line-height: 1.6;
}

.posting-rules-list strong {
  font-weight: 700;
}

.posting-rules-v2 .posting-rules-list li {
  display: list-item;
}

.posting-rules-v2 .posting-rules-list strong {
  color: var(--text);
}

.posting-rules-v2 .posting-rules-list span {
  display: block;
  margin-top: var(--s1);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.posting-rules-legal-note {
  color: var(--muted, #6b7280);
}

.posting-rules-legal-note a {
  color: var(--link, #2563eb);
  text-decoration: underline;
}

.posting-rules-v2 .posting-rules-legal-note a {
  color: var(--link, #2563eb);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.posting-rules-v2 .posting-rules-modal .account-delete-actions .btn-primary[data-action="accept-posting-rules"] {
  background: #1d9bf0;
  border-color: #1d9bf0;
  color: #fff;
}

.posting-rules-v2 .posting-rules-modal .account-delete-actions .btn-primary[data-action="accept-posting-rules"]:hover {
  background: #1688d4;
  border-color: #1688d4;
}

.posting-rules-error {
  color: var(--danger, #b42318);
}

.posting-rules-actions {
  position: sticky;
  bottom: -18px;
  margin-inline: -22px;
  padding: 12px 22px 4px;
  background: var(--bg, #fff);
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.12));
}

.account-delete-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.account-delete-target {
  font-size: 14px;
  color: var(--muted, #6b7280);
  margin: 0;
}

.account-delete-warning {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: inherit;
}

.account-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.account-delete-actions .btn-secondary,
.account-delete-actions .btn-danger {
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.account-delete-actions .btn-secondary {
  background: transparent;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  color: inherit;
}

.account-delete-actions .btn-danger {
  background: #d93025;
  color: #fff;
}

.account-delete-actions .btn-primary {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

.account-delete-actions .btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.delete-all-posts-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.delete-all-posts-input-label {
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin: 0;
}

.delete-all-posts-userid-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  border-radius: 8px;
  font-size: 15px;
  background: var(--bg, #fff);
  color: inherit;
  box-sizing: border-box;
}

.delete-all-posts-userid-input:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.delete-all-posts-input-error {
  font-size: 13px;
  color: #d93025;
  margin: 0;
  min-height: 1em;
}

.edit-post-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.edit-post-modal {
  width: min(100%, 520px);
  max-height: min(720px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.edit-post-header,
.edit-post-footer,
.edit-post-actions {
  display: flex;
  align-items: center;
}

.edit-post-header {
  justify-content: space-between;
  gap: 12px;
}

.edit-post-header h2 {
  margin: 0;
  font-size: 18px;
}

.edit-post-close-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.edit-post-close-btn:hover {
  background: var(--bg-hover);
}

.edit-post-label {
  font-size: 14px;
  font-weight: 700;
}

#edit-post-body {
  width: 100%;
  min-height: 180px;
  max-height: min(48dvh, 360px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

#edit-post-body:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.edit-post-footer {
  justify-content: space-between;
  gap: 12px;
}

.edit-post-actions {
  justify-content: flex-end;
  gap: 10px;
}

.edit-post-actions .btn-secondary,
.edit-post-actions .btn-primary {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
}

.edit-post-actions .btn-secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 560px) {
  .edit-post-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .edit-post-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }

  .edit-post-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .edit-post-actions {
    width: 100%;
  }

  .edit-post-actions .btn-secondary,
  .edit-post-actions .btn-primary {
    flex: 1;
  }
}

/* 管理者向け通報バナー（投稿詳細） */
.report-banner {
  margin: 0.75rem 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 7%, var(--bg));
}

.report-banner-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--danger);
}

.report-banner-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.report-banner-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.report-banner-item {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.report-banner-reason {
  margin: 0 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.report-banner-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.report-banner-status {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.report-banner-meta {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.report-banner-note,
.report-banner-adminnote {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.report-banner-textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.report-banner-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.report-banner-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.report-banner-field .report-banner-textarea {
  margin-bottom: 0;
  font-weight: 400;
}

.report-banner-count {
  align-self: flex-end;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
}

.report-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.report-banner-btn {
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.report-banner-btn:hover {
  background: var(--bg-hover);
}

.report-banner-btn-reject {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.report-banner-btn-delete {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.report-banner-btn-delete:hover {
  background: color-mix(in srgb, var(--danger) 85%, #000);
}

/* ─── APIキー管理 ─── */

.api-key-row {
  flex-wrap: wrap;
  gap: 8px 14px;
}

.api-key-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.api-key-badge-active {
  color: #16a34a;
  background: color-mix(in srgb, #16a34a 14%, transparent);
}

.api-key-badge-revoked {
  color: var(--muted, #9ca3af);
  background: var(--bg-secondary, rgba(0, 0, 0, 0.06));
}

.api-key-row-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.api-key-revoke-btn {
  font-size: 12px;
  padding: 4px 10px;
}

.api-key-prefix {
  font-family: var(--font-mono, "SF Mono", "Menlo", "Consolas", monospace);
  font-size: 12px;
  background: var(--bg-secondary, #eff3f4);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-all;
}

.settings-api-keys-header {
  padding: 12px 16px;
}

.settings-api-keys-footer {
  padding: 8px 16px 4px;
}

.api-keys-guide {
  margin: 12px 4px;
}

.api-keys-guide-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 10px 14px;
}

.api-keys-guide-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.api-keys-curl {
  font-family: var(--font-mono, "SF Mono", "Menlo", "Consolas", monospace);
  font-size: 12px;
  background: var(--bg-secondary, #1e1e1e);
  color: var(--text, #e0e0e0);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  line-height: 1.5;
}

.api-key-reveal-modal {
  gap: 10px;
}

.api-key-reveal-input {
  font-family: var(--font-mono, "SF Mono", "Menlo", "Consolas", monospace);
  font-size: 13px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary, #eff3f4);
  border: 1px solid var(--border-card, rgba(15, 20, 25, 0.14));
  border-radius: 8px;
  color: var(--text);
  user-select: all;
  word-break: break-all;
}

/* In-app auth modal — Google sign-in button (mirrors /login page styles). */
.auth-section .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
}
.auth-section .auth-divider::before,
.auth-section .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-card, #e0e0e0);
}
.auth-section .auth-divider-text {
  font-size: 11px;
  color: var(--text-muted, #999);
  letter-spacing: 0.04em;
}
.auth-section .auth-google-btn {
  width: 100%;
  padding: 12px 0;
  background: #fff;
  color: #333;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .15s ease, box-shadow .15s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-section .auth-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.auth-section .auth-google-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}
.auth-section .auth-google-icon {
  flex-shrink: 0;
}

/* AI Cast（.ai/current-task.md 2026-07-15）: /cast キャラ選択画面。ダークローンチのため
   ナビからのリンクは無く、直URLでのみ到達する。
   2026-07-16 P5（zeta白版）: オーナー判断で紙・セピア(P3/P4)を差し戻し、zetaの白版に確定
   （モックアップ承認済み。デザイントークン正本 /root/zetter_pr/zeta_ui_refs/
   CAST_DESIGN_TOKENS.md、数値の変更・発明はしない）。装飾ゼロのフラット。
   カード構造（縦長カバー絵支配＋フック＋#タグ）はそのまま、地と質感だけを白に戻す
   （Zetter本体はモノクロ白のまま・#cast-home-view にスコープ）。
   2026-07-17 オーナー指示でダーク対応を追加: ライトの解決値は上記トークンのまま完全維持し、
   --cast-* カスタムプロパティに切り出した上で :root[data-theme="dark"] #cast-home-view で
   ダーク値（トークン正本のダーク版、Zetter本体の既存ダークテーマと同じ値）に切り替える。 */
#cast-home-view, #cast-mine-view, #cast-profile-view, #cast-talks-view, #cast-search-view, .cast-bottom-nav {
  --cast-bg: #ffffff;
  --cast-ink: #1c1c1e;
  --cast-sub: rgba(0, 0, 0, 0.62);
  --cast-faint: rgba(0, 0, 0, 0.45);
  --cast-hairline: rgba(0, 0, 0, 0.1);
  --cast-chip-bg: rgba(28, 28, 30, 0.72);
  --cast-cta-bg: #1c1c1e;
  --cast-cta-text: #ffffff;
  background: var(--cast-bg);
}

:root[data-theme="dark"] #cast-home-view,
:root[data-theme="dark"] #cast-search-view,
:root[data-theme="dark"] .cast-bottom-nav {
  --cast-bg: #050506;
  --cast-ink: #f2f3f5;
  --cast-sub: rgba(242, 243, 245, 0.64);
  --cast-faint: rgba(242, 243, 245, 0.42);
  --cast-hairline: rgba(255, 255, 255, 0.07);
  --cast-chip-bg: #111113;
  --cast-cta-bg: #3d8bff;
  --cast-cta-text: #f2f3f5;
}

:root[data-theme="dark"] #cast-mine-view,
:root[data-theme="dark"] #cast-profile-view,
:root[data-theme="dark"] #cast-talks-view {
  --cast-bg: #050506;
  --cast-ink: #f2f3f5;
  --cast-sub: rgba(242, 243, 245, 0.64);
  --cast-faint: rgba(242, 243, 245, 0.42);
  --cast-hairline: rgba(255, 255, 255, 0.07);
  --cast-chip-bg: #111113;
  --cast-cta-bg: #3d8bff;
  --cast-cta-text: #f2f3f5;
}

/* SNSプロフィールの「キャスト」タブ（2026-08-03）。キャストカード（.cast-character-card 系）を
   そのまま再利用するため、--cast-* トークンをこのコンテナにだけ定義する。カード系セレクタは
   :is(#cast-home-view, #cast-search-view, .profile-casts) で本コンテナにも適用される。
   #cast-*-view と違って background は塗らない — ここはZetter本体の画面で、地は本体のまま。 */
.profile-casts {
  --cast-bg: #ffffff;
  --cast-ink: #1c1c1e;
  --cast-sub: rgba(0, 0, 0, 0.62);
  --cast-faint: rgba(0, 0, 0, 0.45);
  --cast-hairline: rgba(0, 0, 0, 0.1);
  --cast-chip-bg: rgba(28, 28, 30, 0.72);
  --cast-cta-bg: #1c1c1e;
  --cast-cta-text: #ffffff;
}

:root[data-theme="dark"] .profile-casts {
  --cast-bg: #151516;
  --cast-ink: #e5e7eb;
  --cast-sub: rgba(255, 255, 255, 0.68);
  --cast-faint: rgba(255, 255, 255, 0.48);
  --cast-hairline: rgba(255, 255, 255, 0.1);
  --cast-cta-bg: #ffffff;
  --cast-cta-text: #151516;
}

/* 非公開キャストのバッジ（本人が自分のプロフィールを見たときだけ出る）。
   NEW/公式バッジと同じ .cast-character-badge の器に乗る。ただし同じ濃色チップだと
   NEW と見分けが付かない（作ったばかりの非公開キャストは両方付く）ため、
   地と字を反転させて「状態ラベル」であることを見た目で分ける。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-private {
  background: rgba(255, 255, 255, 0.92);
  color: #0f1419;
}

/* cast専用ボトムナビ（zeta流、2026-07-18）: 回遊4画面（ホーム/トーク/作成=自作一覧/
   マイ=呼び名設定）でのみ body.cast-tabbar-active により表示。詳細/チャット/作成フォームは
   没入・作業面なので出さない（zetaも同じ使い分け）。表示中はSNS側 .bottom-nav と
   ヘッダー右の回遊アイコン3つを置き換える。 */
.cast-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: calc(56px + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--cast-bg);
  /* zeta形状: 上角丸の「層」。左右+上のhairlineで白地でも輪郭が読めるようにする */
  border: 1px solid var(--cast-hairline);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  z-index: 50;
  align-items: center;
  justify-content: space-around;
}

body.cast-tabbar-active .cast-bottom-nav {
  display: flex;
}

/* ワールドハブ(/worlds)表示中: SNS・Castどちらのシェル要素も隠す（設計書6章）。
   ハブは「SNS画面の上にCastへの入口が乗っている」ように見せない中立空間。 */
body.world-hub-active .main,
body.world-hub-active #app-sidebar,
body.world-hub-active .sidebar,
body.world-hub-active .main-header,
body.world-hub-active .bottom-nav,
body.world-hub-active .cast-bottom-nav,
body.world-hub-active #sidebar-post-btn,
body.world-hub-active .rsidebar,
body.world-hub-active .header-cast-switch-btn,
body.world-hub-active .cast-header-z-btn {
  display: none;
}

/* cast世界の非チャット全画面（cast-header-active=home/mine/talks/profile/create/detail）では
   SNS側ボトムナビを隠す（zetaは詳細・作成でもナビなしの没入面）。
   併せて sticky CTA / 保存バー用の下端オフセットをbottom-nav分からsafe-areaのみへ。 */
body.cast-header-active .bottom-nav {
  display: none;
}

/* castChat（cast-world-active ∧ chat-view-active はcastChatのみ）: zeta流にチャット中も
   SNSナビを出さない（オーナー指摘 2026-07-18）。ナビの高さ分を差し引いていたシェル高さ計算は
   --chat-bottom-nav-height をゼロにして全画面化し、ナビが担っていた下端の余白は
   composer側のsafe-areaパディングで補う。ZYN本体・不具合報告チャット（cast-world-activeなし）は
   従来どおりナビ表示＋キーボード直上固定のまま。 */
body.cast-world-active.chat-view-active {
  --chat-bottom-nav-height: 0px;
}

body.cast-world-active.chat-view-active .bottom-nav {
  display: none;
}

body.cast-world-active.chat-view-active .zeta-chat-composer {
  padding-bottom: calc(12px + var(--safe-area-bottom));
}

/* お問い合わせ(cast導線)専用シェル（2026-08-25 窓口統合 B）。cast-world-active
   （castChat専用の全画面化）をそのまま流用すると、上のbody.cast-world-active.chat-view-active
   と同様に --chat-bottom-nav-height が0pxになって.bottom-navが消え、入力欄が全画面化した上に
   castボトムバー(cast-tabbar-active)と重なってしまう。ここではSNS側.bottom-navだけを隠し、
   --chat-bottom-nav-heightはcastボトムバーの実高さ(56px+safe-area)に合わせて
   .zeta-chat-shellがその上で止まるようにする。cast-tabbar-active自体はrenderNavigation()側で
   別途立てる（castTabSectionは""のままなので、どのタブも選択状態にならない）。 */
body.ops-talk-cast-shell.chat-view-active {
  --chat-bottom-nav-height: calc(56px + var(--safe-area-bottom));
}

body.ops-talk-cast-shell.chat-view-active .bottom-nav {
  display: none;
}

body.cast-header-active {
  --app-bottom-offset: var(--safe-area-bottom);
}

:root[data-theme="dark"] body.cast-tabbar-active {
  background: #050506;
}

/* バー表示中はヘッダー右の回遊アイコン（トーク/自分のキャラ/呼び名）も隠す。
   Z戻るロゴ（cast-header-z-btn）はSNSへの戻り導線なので隠さず残す（#320撤去→オーナー指摘で復元） */

body.cast-tabbar-active #cast-home-view .cast-header-icon-btn,
body.cast-tabbar-active #cast-mine-view .cast-header-icon-btn,
body.cast-tabbar-active #cast-talks-view .cast-header-icon-btn,
body.cast-tabbar-active #cast-profile-view .cast-header-icon-btn {
  display: none;
}

/* バーの下に最終行が隠れないように（4画面はwindowスクロール） */
body.cast-tabbar-active #cast-home-view,
body.cast-tabbar-active #cast-mine-view,
body.cast-tabbar-active #cast-talks-view,
body.cast-tabbar-active #cast-profile-view {
  padding-bottom: calc(72px + var(--safe-area-bottom));
}

.cast-bnav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cast-faint);
  -webkit-tap-highlight-color: transparent;
}

.cast-bnav-item[hidden] {
  display: none;
}

.cast-bottom-nav.has-partner .cast-bnav-item {
  flex: 1 1 20%;
  width: auto;
  min-width: 0;
  max-width: 120px;
}

.cast-ambient-bnav-item {
  text-decoration: none;
  overflow: visible;
}

.cast-ambient-bnav-icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  overflow: visible;
  border: 3px solid var(--cast-bg);
  border-radius: 50%;
  background: var(--cast-ink);
  color: var(--cast-bg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 2px 8px rgba(15, 20, 25, 0.18);
  transform: translateY(-10px);
}

.cast-ambient-bnav-item:focus-visible .cast-ambient-bnav-icon {
  outline: 2px solid var(--cast-ink);
  outline-offset: 2px;
}

.cast-bnav-item .cast-ambient-bnav-dot {
  top: 0;
  right: calc(50% + 14px);
  z-index: 1;
  border: 2px solid var(--cast-bg);
}

.cast-ambient-bnav-beta {
  position: absolute;
  top: -3px;
  right: calc(50% - 27px);
  z-index: 2;
  min-width: 19px;
  padding: 2px 4px;
  border: 2px solid var(--cast-bg);
  border-radius: 999px;
  background: var(--cast-ink);
  color: var(--cast-bg);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.cast-bnav-item i {
  font-size: 22px;
  line-height: 1;
}

.cast-bnav-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
}

.cast-bnav-item.active {
  color: var(--cast-ink);
}

/* cast内検索（zetaスイープ サイクル5）: zetaの検索画面の翻訳。
   ヘッダー=戻る+丸角入力欄。本文=最近の検索/おすすめタグ（.cast-tag-pill再利用）/
   結果グリッド（.cast-character-grid再利用。カード系セレクタは :is() で本ビューにも適用）。 */
/* ボトムバー表示中はヘッダーの回遊アイコン3つを隠しているが、ホームの検索アイコンだけは
   例外的に残す（zetaのホーム右上の検索に対応。上の非表示ルールと同specificityのため後勝ち） */
body.cast-tabbar-active #cast-home-view .cast-header-search-btn {
  display: flex;
}

/* cast側ヘッダー右端のZボタン（SNSへ帰る）。#320で撤去→オーナー指摘（2026-07-19）で復元 */
#cast-home-view .cast-header-z-btn,
#cast-mine-view .cast-header-z-btn,
#cast-profile-view .cast-header-z-btn,
#cast-talks-view .cast-header-z-btn,
#cast-create-view .cast-header-z-btn,
#cast-detail-view .cast-header-z-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* Zボタンをabsoluteにしたぶん、右側アイコン群がその下に潜らないよう余白を確保 */
#cast-home-view .cast-header-right,
#cast-mine-view .cast-header-right,
#cast-profile-view .cast-header-right,
#cast-talks-view .cast-header-right,
#cast-create-view .cast-header-right,
#cast-detail-view .cast-header-right {
  padding-right: 52px;
}

#cast-home-view .cast-header-z-btn img,
#cast-mine-view .cast-header-z-btn img,
#cast-profile-view .cast-header-z-btn img,
#cast-talks-view .cast-header-z-btn img,
#cast-create-view .cast-header-z-btn img,
#cast-detail-view .cast-header-z-btn img {
  width: 34px;
  height: 34px;
  display: block;
}

:root[data-theme="dark"] #cast-home-view .cast-header-z-btn img,
:root[data-theme="dark"] #cast-mine-view .cast-header-z-btn img,
:root[data-theme="dark"] #cast-profile-view .cast-header-z-btn img,
:root[data-theme="dark"] #cast-talks-view .cast-header-z-btn img,
:root[data-theme="dark"] #cast-create-view .cast-header-z-btn img,
:root[data-theme="dark"] #cast-detail-view .cast-header-z-btn img {
  filter: invert(1);
}

#cast-search-view .cast-search-header {
  gap: 10px;
  padding: 0 12px 0 8px;
}

#cast-search-view .cast-search-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--cast-hairline);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 15px;
  background: var(--cast-bg);
  color: var(--cast-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#cast-search-view .cast-search-input:focus {
  border-color: var(--cast-ink);
}

#cast-search-view .cast-search-input::placeholder {
  color: var(--cast-faint);
}

#cast-search-view .cast-search-section {
  padding: 18px 12px 0;
}

#cast-search-view .cast-search-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink);
}

#cast-search-view .cast-search-clear-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--cast-faint);
  cursor: pointer;
}

#cast-search-view .cast-search-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* AI Cast 共通ヘッダー（2026-07-17 peer仕様変更）: /cast, /cast/mine, /cast/profile,
   /cast/create, /cast/:id(詳細) の5画面共通。#main-headerは body.cast-header-active で
   隠しているため、各viewの先頭にこのバーを自前で出す（chat系のzeta-chat-topbarと同じ考え方）。
   装飾ゼロ・白地+下hairlineのみ（CAST_DESIGN_TOKENS.md準拠）。 */
#cast-home-view .cast-header-bar,
#cast-mine-view .cast-header-bar,
#cast-profile-view .cast-header-bar,
#cast-talks-view .cast-header-bar,
#cast-create-view .cast-header-bar,
#cast-detail-view .cast-header-bar,
#cast-search-view .cast-header-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* SNS側(main-header, 実高61px)と高さを統一（世界切替の行き来で差が目立つため） */
  min-height: 61px;
  padding: 0 8px;
  background: var(--cast-bg);
  border-bottom: 1px solid var(--cast-hairline);
}

/* ヘッダー内 ホーム/ランキング タブ（2026-07-30 オーナー指示 zeta準拠）。
   zeta同様、ヘッダー左（アバターの隣）に大きめのテキストタブを並べ、
   アクティブは濃色・非アクティブは淡色。下線や塗りは使わない。 */
.cast-header-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: auto;
  margin-left: 6px;
  min-width: 0;
}
.cast-header-tab-btn {
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cast-sub, #536471);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition, 0.15s ease);
  -webkit-tap-highlight-color: transparent;
}
.cast-header-tab-btn.is-active {
  color: var(--cast-ink, #0f1419);
}

#cast-home-view .cast-header-left,
#cast-mine-view .cast-header-left,
#cast-profile-view .cast-header-left,
#cast-talks-view .cast-header-left,
#cast-create-view .cast-header-left,
#cast-detail-view .cast-header-left {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

#cast-home-view .cast-header-back-btn,
#cast-mine-view .cast-header-back-btn,
#cast-profile-view .cast-header-back-btn,
#cast-talks-view .cast-header-back-btn,
#cast-create-view .cast-header-back-btn,
#cast-detail-view .cast-header-back-btn,
#cast-search-view .cast-header-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cast-ink);
  cursor: pointer;
}

#cast-home-view .cast-header-back-btn .icon,
#cast-mine-view .cast-header-back-btn .icon,
#cast-profile-view .cast-header-back-btn .icon,
#cast-talks-view .cast-header-back-btn .icon,
#cast-create-view .cast-header-back-btn .icon,
#cast-detail-view .cast-header-back-btn .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#cast-home-view .cast-header-wordmark,
#cast-mine-view .cast-header-wordmark,
#cast-profile-view .cast-header-wordmark,
#cast-talks-view .cast-header-wordmark,
#cast-create-view .cast-header-wordmark,
#cast-detail-view .cast-header-wordmark {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cast-ink);
  cursor: pointer;
}

#cast-home-view .cast-header-wordmark-static,
#cast-mine-view .cast-header-wordmark-static,
#cast-profile-view .cast-header-wordmark-static,
#cast-talks-view .cast-header-wordmark-static,
#cast-create-view .cast-header-wordmark-static,
#cast-detail-view .cast-header-wordmark-static {
  cursor: default;
}

#cast-home-view .cast-header-right,
#cast-mine-view .cast-header-right,
#cast-profile-view .cast-header-right,
#cast-talks-view .cast-header-right,
#cast-create-view .cast-header-right,
#cast-detail-view .cast-header-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

#cast-home-view .cast-header-icon-btn,
#cast-mine-view .cast-header-icon-btn,
#cast-profile-view .cast-header-icon-btn,
#cast-talks-view .cast-header-icon-btn,
#cast-create-view .cast-header-icon-btn,
#cast-detail-view .cast-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cast-sub);
  font-size: 16px;
  cursor: pointer;
}

#cast-home-view .cast-header-icon-btn.active,
#cast-mine-view .cast-header-icon-btn.active,
#cast-profile-view .cast-header-icon-btn.active,
#cast-talks-view .cast-header-icon-btn.active,
#cast-create-view .cast-header-icon-btn.active,
#cast-detail-view .cast-header-icon-btn.active {
  color: var(--cast-ink);
  font-weight: 900;
}

#cast-home-view .cast-home-header,
#cast-mine-view .cast-home-header,
#cast-profile-view .cast-home-header {
  padding: 20px 16px 4px;
}

#cast-home-view .cast-home-title,
#cast-mine-view .cast-home-title,
#cast-profile-view .cast-home-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cast-ink);
}

#cast-home-view .cast-home-subtitle,
#cast-mine-view .cast-home-subtitle,
#cast-profile-view .cast-home-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--cast-sub);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 12px;
}

/* マイページ（castProfile）: 設定メニュー（ドリルイン）と各サブ画面のヘッダー。
   2026-07-23 オーナー要望。上半分はゼッターの .profile-cover/.profile-card を再利用。 */
.cast-profile-menu {
  display: flex;
  flex-direction: column;
}
/* 項目のグルーピング（2026-07-30）: あなたのこと／表示／お知らせ・サポート。
   塗らない・囲まない。ペルソナ選択シートの群見出しと同じ様式（11px/600/letter-spacing）。 */
.cast-profile-menu-group {
  display: flex;
  flex-direction: column;
}
.cast-profile-menu-group + .cast-profile-menu-group {
  margin-top: 28px;
}
/* ヘッダーカード（hairline罫まで）と最初のグループの間。実測0pxで見出しが罫に
   張り付いていた（2026-07-30 オーナー指摘「余白が崩れてて最悪」）。 */
#cast-profile-view .profile-card + .cast-profile-menu-group {
  margin-top: 24px;
}
#cast-profile-view .cast-profile-menu-group-label {
  margin: 0 0 8px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cast-faint);
  text-transform: none;
}
/* castはモノクロ基調。共有部品のデフォルトアバター（青グレー#cfd9de）はこの画面では
   浮くので、トークンのグレーに落とす（2026-07-30、cast profileスコープのみ）。 */
#cast-profile-view .profile-avatar {
  background: var(--cast-hairline);
}
#cast-profile-view .profile-avatar .avatar-icon {
  fill: var(--cast-faint);
}
/* PCにはhoverのフィードバックを（スマホは:activeのみ）。 */
@media (hover: hover) {
  #cast-profile-view .cast-profile-menu-item:hover {
    background: var(--cast-hairline);
  }
}
/* サイドバーの .cast-row 系（public/styles.css）に寸法・区切りの思想を揃える
   （2026-07-30）: min-height 44px・角丸10px・罫ではなくグループ間の余白で分ける。 */
#cast-profile-view .cast-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cast-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
#cast-profile-view .cast-profile-menu-item:active {
  background: var(--cast-hairline);
}
.cast-profile-menu-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cast-profile-menu-label {
  font-size: 15px;
  font-weight: 600;
}
/* 説明文は1行切り捨てでなく2行まで読ませる（ぼかし設定の説明が420px幅で
   「…」になり意味が取れなかった、2026-07-30実機確認）。 */
#cast-profile-view .cast-profile-menu-sub {
  font-size: 12px;
  color: var(--cast-sub);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 未読件数は塗りバッジではなく色つきテキストで示す（塗りで区別しない方針）。 */
.cast-profile-menu-badge {
  flex: 0 0 auto;
  color: var(--cast-danger, #f4212e);
  font-size: 13px;
  font-weight: 600;
}

/* 運営トークルーム行の未読バッジ（LINE/iOS式の赤丸＋白文字）。修飾クラスを付けた行
   だけに効くので、お知らせ行など既存の .cast-profile-menu-badge は赤文字のまま不変。
   寸法はSNS本体の通知バッジ(.badge: 18px角・11px・700・pill)の慣行に合わせ、
   位置だけ行内フローに変える（.badge は position:absolute でナビ用のため流用不可）。
   色はテーマ変数を通さず固定値にする: ダークテーマでも赤地に白文字のまま反転させない。 */
.cast-profile-menu-badge--count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  /* 左右は対称。padding-topの1pxだけが光学調整で、数字を約0.5px下げる。
     数字はディセンダを持たないため、行ボックスをそのまま中央寄せすると
     ベースライン下の余白が効いて「やや上に浮いて」見える定番の症状への対処。
     高さは18pxのままなので円は崩れない（box-sizing: border-box）。 */
  padding: 1px 5px 0;
  border-radius: var(--radius-pill, 999px);
  background: #f4212e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  /* 中央寄せはflex（align-items/justify-content）が担う。line-heightで縦位置を
     作らないため1に固定する（line-height頼みの中央揃えはフォント差でずれる）。 */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#cast-profile-view .cast-profile-menu-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--cast-faint);
}
#cast-profile-view .cast-profile-menu-chevron .icon {
  width: 16px;
  height: 16px;
}
#cast-profile-view .cast-substep-empty {
  padding: 24px 16px;
  color: var(--cast-sub);
  font-size: 14px;
  text-align: center;
}

/* マイページの外枠は固定（position:fixed）でドキュメントに高さを足さないが、中身(--menu/--step)は
   overflow-y:auto でスクロール可能にする。実機(Android Brave/Firefox)でヘッダーの動的表示等により
   実際の可視領域がビューポートより狭くなり、--menuをoverflow:hiddenにしていると中身がはみ出た分に
   一切届けなくなる不具合が発生したための修正（2026-07-24、ユーザー報告）。中身が収まる場合は見た目上
   何も変わらない（スクロールバーは出ない・動かせるものがない）。
   :not([hidden]) で他タブに漏れないようにする（召喚ページと同じ地雷対策）。2026-07-23 オーナー要望。 */
@media (max-width: 700px) {
  body.cast-tabbar-active #cast-profile-view:not([hidden]) {
    position: fixed;
    inset: 0;
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  #cast-profile-view .cast-profile-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: calc(56px + var(--safe-area-bottom));
  }
  #cast-profile-view .cast-profile-body--menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #cast-profile-view .cast-profile-body--step {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* PC: 画面下部中央に浮くボトムナビの背後へ最終行が潜り込まないよう、
   通常フローのままナビぶんの逃しを敷く（2026-07-30実機確認、シェア行が隠れていた）。 */
@media (min-width: 701px) {
  #cast-profile-view .cast-profile-body {
    padding-bottom: calc(72px + var(--safe-area-bottom, 0px));
  }
}

/* zeta白版カード。影・段差なしのフラット、hairline枠のみ。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cast-bg);
  color: inherit;
  font-family: inherit;
  text-align: left;
  min-width: 0;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-detail {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-detail .cast-character-card-overlay {
  padding-bottom: 0;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-footer {
  padding: 0 12px 12px;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-detail:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--cast-hairline);
  overflow: hidden;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* バッジ列（zetaスイープ サイクル2）: 公式/NEW/作者を左上に横並び。個々のバッジは
   コンテナ内でstatic配置に変更（旧: バッジ単体がabsolute） */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--cast-chip-bg);
  color: #ffffff;
}

/* トーク数チップ（2026-07-24）。他のバッジ(公式/NEW)は文字だけの角丸ラベルだが、
   こちらはアイコン+数値の丸ピル（zetaの一覧カード左上チップを参考）。 */
/* 種別ごとの色分け（2026-08-08）。**共通クラス .cast-character-badge + 種別modifier**の形で、
   個別ページに直書きしない。色の実体は --cast-badge-* トークン側にある。
   順位バッジ・非公開バッジ・登場人物N人は従来の見た目のまま（順位は現状維持でよい、という
   指示。登場人物N人は「数の情報」で種別ではないので中立色に置く）。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-story {
  background: var(--cast-badge-story-bg);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-multi {
  background: var(--cast-badge-multi-bg);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-chat {
  background: var(--cast-badge-chat-bg);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-new {
  background: var(--cast-badge-new-bg);
}

/* 公式は従来 --cast-cta-bg（黒／白）だった。ブランドの青に寄せる指示なので上書きするが、
   定義順で後に来る既存の -official ルールに負けないよう、ここでは触らず下の既存ルールを
   直接書き換えてある（同じ詳細度のルールを2つ置かない）。 */

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-talk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: normal;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-talk .icon {
  width: 12px;
  height: 12px;
}

/* ランキングタブの順位バッジ（2026-07-30）。数値・順位を出さない既存の人気度方針とは別枠
   （ここは「ランキング」という順位表示そのものが機能なので、既存の badge と同じ地色で
   1〜10の数字だけを出す。過剰な金銀銅装飾はしない）。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-rank {
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* zetaの黒スクリムに相当する演出は白版では使わない（帯は不要・地が白いまま）。
   DOM構造(cast-character-card-scrim)は維持しつつ非表示にする。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-scrim {
  display: none;
}

/* 画像ぼかし（2026-07-24）: キャスト詳細ページと同じ仕組み（filter:blur+scale拡大、
   タップで解除）。カード自体が1つのbuttonのため、オーバーレイは入れ子buttonにせず
   非活性のspanにし、解除はカード自体のクリックハンドラ側（open-cast-detail）でガードする。 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-media.is-blurred .cast-character-card-img {
  filter: blur(24px);
  transform: scale(1.06);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-blur-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: center;
  pointer-events: none;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-blur-overlay-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-blur-overlay-label {
  font-size: 12px;
  font-weight: 700;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-card-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  background: var(--cast-bg);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: var(--cast-ink);
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-tagline {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--cast-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-hook {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cast-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 6px;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  color: var(--cast-faint);
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* 作者ID。画像上バッジから降格した控えめ表示（2026-07-21）。長いIDでもカード幅で省略 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-author {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--cast-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 入力語と独立したタグ条件。入力欄を再生成せず結果本文側に表示する。 */
#cast-search-view .cast-search-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* AI Cast キャラ詳細ページ（.ai/current-task.md 2026-07-16 P2）。/cast/:characterId。
   カード→即チャットの間に挟む「読んでから始める」中間層。#cast-detail-view はfeed-view
   （＝親要素がスクロールコンテナ）なので、内部に個別スクロール領域は作らず、下部CTAだけを
   position:stickyで画面下に固定する。 */
.cast-detail-hero {
  /* zeta比較パス3: ヒーロー画像はカード枠でなく端まで全幅（zetaのキャラ詳細と同形） */
  padding: 0;
  /* お気に入り数バッジ（2026-07-24）をヒーロー全体基準の右下に固定するため。
     カルーセルを横スワイプしても常に同じ位置に重ねて表示する（スライド毎ではなく1つだけ）。 */
  position: relative;
}

/* お気に入り数バッジ（2026-07-24）。zetaのハートアイコン+件数の位置を踏襲し、
   ブックマークアイコン+件数に置き換えて表示する（表示ON時のみ、非表示が既定）。 */
.cast-detail-hero-stat-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cast-detail-hero-stat-badge .icon {
  width: 15px;
  height: 15px;
  fill: #fff;
}

/* 登場人物チップ（②#5、2026-08-04）。複数人キャストが1人キャストと見た目で同じだった状態を
   解消する最小表示。「丸アイコン＋名前」を横に流すだけで、塗りつぶしのバッジにはしない。
   アイコンの寸法は**この画面に既にある .cast-novel-dialogue-avatar（イントロ試し読みの
   セリフアバター）と同じ32px**に揃える。独自の寸法は作らない（2026-08-04 オーナー指摘
   「変える必要のないところは旧来から変えないで」）。 */
.cast-detail-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-detail-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cast-detail-member-avatar {
  flex: 0 0 auto;
  /* .cast-novel-dialogue-avatar と同じ 32px / 丸 / cover。 */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」）。中身は.avatar-icon（DEFAULT_AVATAR_SVG）に揃える。 */
.cast-detail-member-avatar-blank {
  background: #cfd9de;
}

/* 閲覧注意（2026-08-04 オーナー裁定でmust）: 本体を隠しているのに登場人物のアイコンだけ
   素通しになっていた。**既存のぼかしの作法（外側に is-blurred / 中の画像に filter）をそのまま
   使う**。強さは同じページのギャラリーサムネ（.cast-detail-gallery-thumb）と同じ 6px
   ——小さいアイコンなので、ヒーロー画像の24pxではなくこちらに揃える。 */
.cast-detail-member.is-blurred .cast-detail-member-avatar {
  filter: blur(6px);
}

/* タップで解除できることを示す（2026-08-09）。ぼかし中のチップはヒーロー画像のオーバーレイと
   同じ「タップで表示」に反応する（解除はページ内のぼかし全体に連動する）。 */
.cast-detail-member.is-blurred {
  cursor: pointer;
}

.cast-detail-member-name {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* トーク数チップ（2026-07-24）。zetaの「💬 333万」チップ相当。タイトル/タグラインの下に置く。 */
.cast-detail-stat-chips {
  display: flex;
  /* モードバッジを別枠に分けた（2026-08-08 オーナー裁定）ぶんチップが増えるので、
     狭い画面でも横に溢れず折り返すようにする。一覧カードのバッジ列は元から wrap 済み。 */
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* モードバッジ（2026-08-08）はトーク数チップと**同じ寸法**を共有する（新しい形を作らない）。
   色だけは種別ごとに変える（下の -story/-multi/-chat）。トーク数チップは従来の中立色のまま。 */
.cast-detail-mode-chip,
.cast-detail-talk-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-bg-alt, rgba(127, 127, 127, 0.14));
  color: var(--text-secondary, #6b7785);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 詳細ページのモードチップも一覧カードと同じ種別色にする（2026-08-08）。
   寸法は上のトーク数チップと共有したまま、背景と文字色だけ差し替える。 */
.cast-detail-mode-chip-story,
.cast-detail-mode-chip-multi,
.cast-detail-mode-chip-chat {
  color: #ffffff;
}

.cast-detail-mode-chip-story {
  background: var(--cast-badge-story-bg);
}

.cast-detail-mode-chip-multi {
  background: var(--cast-badge-multi-bg);
}

.cast-detail-mode-chip-chat {
  background: var(--cast-badge-chat-bg);
}

.cast-detail-talk-count-chip .icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ヒーロー画像枠（2026-07-22 オーナー指摘で再調整）: 公式キャラのカバー画像規格（832x1216）に
   合わせた縦長比 13:19 で枠自体を固定する（画像1枚でもカルーセルでも同じ枠・同じスタイル）。
   枠に対して比率が合わない画像は object-fit: contain + 中央ぞろえで全体を見せ、余白は
   背景色で埋める（トリミングして情報を欠けさせない方針）。 */
.cast-detail-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 13 / 19;
  object-fit: contain;
  object-position: center;
  /* オーナー指摘（2026-07-22）: グレーではなく黒背景に。 */
  background: #000;
}

/* 追加ギャラリー画像（最大10枚、オーナー実機指摘 2026-07-22）: 別セクションの静的グリッドでは
   なく、トップのヒーロー画像自体をカバー画像+ギャラリー画像の横スワイプにする。
   CSS scroll-snapのみで実装（JS不要・ネイティブのモメンタムスクロールに乗る）。 */
.cast-detail-hero-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cast-detail-hero-carousel::-webkit-scrollbar {
  display: none;
}

.cast-detail-hero-slide {
  position: relative;
  overflow: hidden;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
}

/* 画像ぼかし（2026-07-24）: post-media-wrap.is-sensitiveと同じ仕組み
   （filter:blur+scale拡大で縁のにじみを隠す、タップで解除。解除は再描画まで持続）。 */
.cast-detail-hero-slide.is-blurred .cast-detail-hero-img {
  filter: blur(24px);
  transform: scale(1.06);
  pointer-events: none;
}

.cast-detail-hero-blur-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  text-align: center;
}

/* 「閲覧注意」ラベルの縦位置（2026-08-09にスマホ実機指摘で再調整）。
   前提: ヒーロー画像はaspect-ratio 13:19固定なので、PCの広い列幅ではヒーロー要素自体が
   ビューポートよりずっと高くなる。単純な top:50%（要素の高さ基準の中央）にすると、PCでは
   その中央が画面外〜下部の「キャストを始める」固定バーの位置に落ちて重なる。
   position:stickyは使えない: 祖先の .cast-detail-hero-carousel が overflow-x:auto
   （＝overflow-yもautoに計算される）で最近接のスクロールコンテナになるため、縦stickyが
   ページスクロールに追従しない。
   そこで top を min(50%, 45vh) にする。ヒーローがビューポートに収まるスマホでは 50%＝
   ヒーローの真ん中（＝見た目の中央。2026-07-24〜の top:15% は上に寄って見えていた）、
   ヒーローが画面より高くなるPCでは 45vh 側が選ばれ、初期表示で見えている範囲に収まり
   下部固定バーとも重ならない。transformにtranslateY(-50%)を足してラベル自身の高さぶんを
   引き、指定位置がラベルの中心になるようにする。 */
.cast-detail-hero-blur-overlay-inner {
  position: absolute;
  top: min(50%, 45vh);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
}

.cast-detail-hero-blur-overlay-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.cast-detail-hero-blur-overlay-label {
  font-size: 14px;
  font-weight: 700;
}

.cast-detail-hero-blur-overlay-hint {
  font-size: 12px;
  opacity: 0.85;
}

/* キャストのトップ階層ヘッダー左上のユーザーアイコン（タップでゼッター共通サイドバー）。
   ゼッターの header-avatar（32px）を36pxのタップ領域で包む。2026-07-23 オーナー決定。 */
.cast-header-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.cast-header-avatar-btn .header-avatar {
  width: 32px;
  height: 32px;
}

/* ===================================================================
   召喚ページ（自分のキャラ）ショーケース（2026-07-23 オーナー要望）。
   縦長トップ画像のピークカルーセル（中央スナップで両隣がチラ見え）。中央のキャラに
   上部の操作バー（トーク＝cast詳細のCTA踏襲／公開切替／編集／削除）とドットが連動し、
   右下に大きな「召喚」FAB。cast詳細ヒーローの縦長13:19・黒背景を踏襲。テーマは
   --cast-cta-bg/text・--cast-ink/sub/hairline のcast共通トークンで両対応。
   =================================================================== */
.cast-showcase-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 0 4px;
}
/* 自分のキャラ詳細（召喚ページのカルーセルをタップして開く画面）の⋯メニュー: ヒーロー画像
   右上に重ねて置く（2026-07-24 オーナー要望、名前下の横並びボタン列から変更）。他人の
   キャストにはこのボタン自体を出さない（isOwnCharacterがfalseならownerMenuHtmlは空文字）。
   タップで開く中身（編集/公開切替/削除）は投稿・コメントと共通のボトムシート
   （repost-picker-sheet, action-sheet-action）を再利用する。 */
.cast-detail-hero-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}
.cast-detail-hero-menu .cast-detail-hero-menu-btn {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
}
.cast-detail-hero-menu.is-open .cast-detail-hero-menu-btn,
.cast-detail-hero-menu .cast-detail-hero-menu-btn:hover {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

/* カルーセル下の「◯◯と話す」（中央キャラ用の即時開始）。この画面で唯一の強い面（塗り）。
   cast詳細のCTAと同じ見た目（--cast-cta-*）で、gap内に少し下げて配置する。 */
.cast-showcase-talk {
  margin: clamp(20px, 6vh, 56px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--cast-cta-bg, #0f1419);
  color: var(--cast-cta-text, #fff);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition, 0.15s ease), transform 0.12s ease;
}
.cast-showcase-talk:active {
  opacity: 0.9;
  transform: translateY(1px);
}
.cast-showcase-talk .icon {
  width: 16px;
  height: 16px;
}

/* 編集リンク（オーナー要望、2026-07-29）: CTA下の塗らないテキストリンク。既存の編集導線
   （open-cast-create + data-character-id）を再利用。＋スライドがアクティブのときは隠す。 */
/* CTA下のアクション行（2026-08-03 機能#38）。中央に「編集」、右端に「＋召喚」を置く。
   ＋召喚を絶対配置で右に逃がすことで、行の高さは従来の編集リンク1本（44px）のまま＝
   スマホの1画面固定（#cast-mine-view の position:fixed）で縦に溢れない。 */
.cast-showcase-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 2px 16px 0;
}
/* 「＋召喚」（機能#38）: 塗らない線のボタン。CTA（黒塗り）と競合しない弱い面に留める。 */
.cast-showcase-summon-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--cast-hairline, #eff3f4);
  border-radius: 8px;
  background: transparent;
  color: var(--cast-ink, #0f1419);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cast-showcase-summon-btn .icon {
  width: 14px;
  height: 14px;
}
.cast-showcase-summon-btn:active {
  background: var(--cast-hairline, #eff3f4);
}
/* ＋召喚スライドが中央のときはCTA自体が「キャストを召喚する」になるので重複を隠す。
   編集リンクと同じく visibility で箱だけ残し、行の高さを動かさない。 */
.cast-showcase-summon-btn.is-ghost {
  visibility: hidden;
  pointer-events: none;
}

.cast-showcase-edit-link {
  align-self: center;
  margin-top: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--cast-sub, #536471);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* ＋召喚スライド選択中は「編集」を消すが、44pxの箱は残す。
   hidden属性(display:none)だと箱ごと消え、スライドを切り替えるたびに
   CTA以下が上下へ動く（オーナー指摘 2026-07-30）。visibilityなら
   クリックもフォーカスも効かないまま高さだけ保てる。 */
.cast-showcase-edit-link.is-ghost {
  visibility: hidden;
  pointer-events: none;
}

.cast-showcase-edit-links {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
}
.cast-showcase-track {
  position: relative; /* slide.offsetLeft の基準にする */
  display: flex;
  gap: 14px;
  /* お気に入りタブ追加（2026-07-24）に伴い、上に表示切り替えタブが増えた分の余白を確保する
     ためカードを一回り小さくした（旧: min(80vw, 344px)）。 */
  --cast-showcase-card-w: min(72vw, 308px);
  padding-inline: calc((100% - var(--cast-showcase-card-w)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cast-showcase-track::-webkit-scrollbar {
  display: none;
}
.cast-showcase-slide {
  flex: 0 0 var(--cast-showcase-card-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.cast-showcase-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 13 / 19;
  background: #000;
  cursor: pointer;
  transform: scale(0.9);
  opacity: 0.5;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}
.cast-showcase-slide.is-active .cast-showcase-card {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.cast-showcase-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* 画像なしカード。hairline は透過色なので黒いカード上ではライトでも黒く見える。
   ライト側は下のルールで不透明な既存面色を使い、ダーク側は従来の暗い見え方を保つ。 */
.cast-showcase-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cast-hairline, #eff3f4);
  color: var(--cast-faint, #8b98a5);
}
/* hairline is translucent over the carousel's black image surface, so in light
   mode it remains nearly black. Give image-free own-cast cards the existing
   secondary surface while keeping the established dark treatment unchanged. */
:root:not([data-theme="dark"]) #cast-mine-view .cast-showcase-card-img-empty {
  background: var(--bg-secondary, var(--cast-bg, #ffffff));
}
.cast-showcase-card-img-empty .icon {
  width: 56px;
  height: 56px;
}
.cast-showcase-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 14px 13px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cast-showcase-card-name {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* キャプション2行目（2026-07-29）: ピル/色分けを全廃しプレーンテキストへ。
   「非公開」「公開中・トーク128」「公式」「@owner」を中黒つなぎで1行に収める。 */
.cast-showcase-card-meta {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 画像なしカードのキャプション: 黒グラデは薄いグレー地の上で煙って見えるだけなので外し、
   地の色に応じたインク文字で直接置く（2026-07-30）。 */
.cast-showcase-card-img-empty + .cast-showcase-card-caption {
  background: none;
}
.cast-showcase-card-img-empty + .cast-showcase-card-caption .cast-showcase-card-name {
  color: var(--cast-ink, #0f1419);
  text-shadow: none;
}
.cast-showcase-card-img-empty + .cast-showcase-card-caption .cast-showcase-card-meta {
  color: var(--cast-sub, #536471);
}

/* 自分のキャスト/お気に入りの切り替えタブ（テキストのアンダーラインタブ、2026-07-29）。
   丸ピル＋塗りを廃止。選択中は--cast-inkの下線のみで示す。カルーセルの真上、中央寄せ。 */
.cast-mine-tab-toggle {
  align-self: center;
  display: flex;
  gap: 24px;
  /* タブはcenter-wrapの外・セクション先頭に固定アンカーする（2026-07-30 オーナー指摘）。
     wrap内に入れると、タブ内容の総高差（空のお気に入り等）でセンタリング位置ごと
     タブの縦位置が動いてしまう。中央寄せは残りの中身（wrap）だけで行う。 */
  flex: 0 0 auto;
  margin: 16px 0 0;
}
.cast-mine-tab-btn {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--cast-sub, #536471);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition, 0.15s ease), border-color var(--transition, 0.15s ease);
}
.cast-mine-tab-btn.is-active {
  color: var(--cast-ink, #0f1419);
  border-bottom-color: var(--cast-ink, #0f1419);
}

.cast-showcase-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 8px;
}
.cast-showcase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cast-faint, #8b98a5);
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cast-showcase-dot.is-active {
  opacity: 1;
  transform: scale(1.4);
  background: var(--cast-ink, #0f1419);
}
/* 11体以上のときはドットの代わりにテキストカウンター（2026-07-29）。 */
.cast-showcase-counter {
  text-align: center;
  min-height: 8px;
  font-size: 12px;
  color: var(--cast-sub, #536471);
  font-variant-numeric: tabular-nums;
}
/* ＋召喚カードが中央のときは数字を出さない（実キャストだけで数えるため "0 / 9" になる）。
   visibility で箱だけ残し、スワイプのたびにCTA以下が上下へ動かないようにする
   （編集リンク・＋召喚ボタンと同じ流儀、2026-08-03 機能#38）。 */
.cast-showcase-counter.is-ghost {
  visibility: hidden;
}

/* お気に入りタブの空状態はテキストのみ（アイコンマーク無し、2026-07-29）。
   自分のキャストタブは0体でも「＋召喚」スライドのカルーセルになるためこの分岐を使わない。 */
/* 空状態は、カルーセルのカード（3:4）と同じ高さの箱として振る舞う。
   高さを合わせないと、タブを切り替えた瞬間に center-wrap の垂直センタリングで
   タブ位置ごと全体が動いてしまい、骨格が変わって見える（オーナー指摘 2026-07-30）。 */
.cast-showcase-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(min(72vw, 308px) * 4 / 3);
  text-align: center;
  padding: var(--s4);
  color: var(--cast-sub, #536471);
}
.cast-showcase-empty-after-add {
  min-height: 0;
}
.cast-showcase-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cast-ink, #0f1419);
}
.cast-showcase-empty-sub {
  margin: var(--s2) 0 0;
  font-size: var(--type-support-size);
}

/* カルーセル末尾の「＋召喚」スライド（2026-07-29、右下FABを統合）。他カードと同寸、
   1px dashedの枠のみで塗らない。中央に来ている間はCTAが「キャストを召喚する」に差し替わる
   （setCastShowcaseActive側）。 */
.cast-showcase-card.cast-showcase-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 1px dashed var(--cast-faint, #8b98a5);
}
.cast-showcase-slide.is-active .cast-showcase-card.cast-showcase-card-add {
  box-shadow: none;
}
.cast-showcase-card-add-icon {
  display: flex;
  color: var(--cast-sub, #536471);
}
.cast-showcase-card-add-icon .icon {
  width: 28px;
  height: 28px;
}
.cast-showcase-card-add-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cast-sub, #536471);
}

/* カルーセルのラッパー（PC用の左右矢印の位置基準）。 */
.cast-showcase-carousel {
  position: relative;
}
/* PC用ナビ矢印: カルーセルの両サイド。クリックで±1枚移動。スマホは非表示（スワイプで操作）。 */
.cast-showcase-arrow {
  display: none;
}
@media (min-width: 701px) {
  /* PC ではサイドバー overlay が開かない（openSidebarOverlay はモバイル時のみ）ので、
     トップ階層ヘッダーのユーザーアイコン自体を出さない（2026-07-23 オーナー要望）。 */
  .cast-header-avatar-btn {
    display: none;
  }
  /* カード308＋左右ピーク48×2ぶんの中央固定幅。枠内で対称に切り、矢印は枠の外側に置く
     （2026-07-29）。 */
  .cast-showcase-carousel {
    max-width: 450px;
    margin: 0 auto;
  }
  .cast-showcase-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--cast-hairline, #eff3f4);
    background: var(--cast-bg, #fff);
    color: var(--cast-ink, #0f1419);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .cast-showcase-arrow .icon {
    width: 18px;
    height: 18px;
  }
  .cast-showcase-arrow:hover {
    background: var(--cast-hairline, #eff3f4);
  }
  .cast-showcase-arrow:active {
    transform: translateY(-50%) scale(0.94);
  }
  .cast-showcase-arrow-prev {
    left: -52px;
  }
  .cast-showcase-arrow-next {
    right: -52px;
  }
  /* PCではCTAの幅をカルーセル枠（450px）に呼応させる。760px列いっぱいの帯は
     上のカードと寸法が噛み合わず間延びして見えた（2026-07-30）。 */
  .cast-showcase-talk {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  /* アクション行もCTAと同じ450px枠に揃え、「＋召喚」がCTAの右端に合うようにする（機能#38）。 */
  .cast-showcase-actions {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* スマホの召喚トップは縦スクロールさせず1画面に固定（2026-07-23 オーナー要望）。
   ヘッダー＋ショーケースを縦フレックスで敷き詰め、ショーケース内を中央寄せにして
   カルーセルとトークCTAを少し下げ、上下の余白を均す。 */
/* 召喚トップは縦フレックスで敷き詰め、ショーケースを中央寄せにしてカルーセルとトークCTAを
   バランスよく配置する（PC/スマホ共通）。:not([hidden]) 必須: display:flex が hidden 属性の
   display:none を上書きして他タブ表示中に召喚ビューが漏れ出るのを防ぐ。 */
body.cast-tabbar-active #cast-mine-view:not([hidden]) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
#cast-mine-view .cast-showcase-section {
  flex: 1 1 auto;
  min-height: 0;
  /* 下の逃しはボトムナビ＋少しの余白ぶんだけ。旧 +72px は右下召喚FABの避けで、
     FABを＋スライドに統合した現在は過大な空白帯になっていた（2026-07-30）。 */
  padding: 0 0 calc(56px + var(--safe-area-bottom) + 24px);
  /* マイページと同じ理由（実機で可視領域が狭くなり中身が収まらないケース）の保険として
     スクロールを許可。中身が収まっていれば見た目は変わらない（2026-07-24）。 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#cast-mine-view .cast-mine-tab-toggle {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cast-bg, var(--bg));
}
/* 中央寄せは justify-content:center ではなく margin:auto の塊（.cast-showcase-center-wrap）で行う
   （2026-07-24、お気に入りタブ追加で発覚した不具合の修正）。justify-content:center は中身が
   overflowすると、はみ出た上半分がスクロールで一切届かない負の領域に置かれてしまい、
   切り替えタブそのものが画面外に消えて操作できなくなっていた。margin:auto は中身が収まる間は
   同じ見た目で中央寄せしつつ、収まらなくなったら自然に上詰め＋通常スクロールへ縮退する。 */
.cast-showcase-center-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: auto 0;
}
#cast-mine-view .cast-showcase-talk {
  margin-top: 4px;
}
/* スマホ: position:fixed で通常フローから外し、ドキュメントに高さを足さない（縦スクロール禁止）。 */
@media (max-width: 700px) {
  body.cast-tabbar-active #cast-mine-view:not([hidden]) {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
}
/* PC: position:fixed だと列レイアウト(.main 760px)が壊れるので、列内で1画面ぶんの高さを確保。 */
@media (min-width: 701px) {
  body.cast-tabbar-active #cast-mine-view:not([hidden]) {
    min-height: 100vh;
  }
}
/* Safariのバーが表示された状態を含む可視高を使う。古いブラウザは従来のinset/スクロールに戻す。
   余白や操作行は固定したまま、カルーセルだけがflexで残り高を受け取り、カード幅を比率に合わせる。
   844px時の従来カード寸法を上限にし、極端に低い画面では高さ160pxを下限としてスクロールへ移る。 */
@media (max-width: 700px) {
  @supports (height: 100svh) and (height: 1cqh) and (contain-intrinsic-size: 0 1px) and selector(.cast-showcase-section:has(.cast-showcase-carousel)) {
    body.cast-tabbar-active #cast-mine-view:not([hidden]) {
      height: 100svh;
      bottom: auto;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-carousel) .cast-showcase-center-wrap {
      display: grid;
      grid-template-rows: minmax(160px, 1fr) auto auto;
      grid-auto-rows: auto;
      flex: 0 1 auto;
      min-height: 0;
      margin: auto 0;
    }

    #cast-mine-view .cast-showcase-carousel {
      flex: none;
      min-height: 160px;
      container-type: size;
      contain-intrinsic-block-size: min(105.2308vw, 450.1538px);
      display: flex;
      align-items: center;
    }

    #cast-mine-view .cast-showcase-track {
      --cast-showcase-card-w: min(72vw, 308px, max(109.48px, 68.421cqh));
      width: 100%;
      height: 100%;
      align-items: center;
    }

    #cast-mine-view .cast-showcase-dots,
    #cast-mine-view .cast-showcase-counter,
    #cast-mine-view .cast-showcase-talk,
    #cast-mine-view .cast-showcase-actions {
      flex-shrink: 0;
    }
  }
}

/* Desktop cast mine uses the same remaining-height carousel as mobile on short
   viewports. Keep the fixed controls above the bottom navigation and let only
   the card area give up height. Taller desktop viewports retain their layout. */
@media (min-width: 701px) and (max-height: 899px) {
  @supports (height: 100svh) and (height: 1cqh) and (contain-intrinsic-size: 0 1px) and selector(.cast-showcase-section:has(.cast-showcase-carousel)) {
    body.cast-tabbar-active #cast-mine-view:not([hidden]) {
      box-sizing: border-box;
      height: 100svh;
      min-height: 0;
      padding-bottom: 0;
      overflow: hidden;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) {
      flex: 1 1 auto;
      min-height: 0;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) .cast-showcase-center-wrap {
      display: grid;
      grid-template-rows: minmax(160px, 1fr) auto auto;
      grid-auto-rows: auto;
      flex: 1 1 auto;
      min-height: 0;
      margin: 0;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) .cast-showcase-carousel {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      max-width: 450px;
      max-height: 450px;
      min-height: 160px;
      container-type: size;
      contain-intrinsic-block-size: min(105.2308vw, 450.1538px);
      display: flex;
      align-items: center;
      align-self: center;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) .cast-showcase-track {
      --cast-showcase-card-w: min(72vw, 308px, max(109.48px, 68.421cqh));
      width: 100%;
      height: 100%;
      align-items: center;
    }

    #cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) :is(.cast-showcase-dots, .cast-showcase-counter, .cast-showcase-talk, .cast-showcase-actions) {
      flex-shrink: 0;
    }
  }
}

/* ギャラリーのサムネイル一覧（2026-07-24）。ヒーローの横スワイプだけでは複数枚あることが
   分かりづらいというオーナー指摘への対応。正方形サムネイルの横並び。枚数が多く収まらない分は
   このトラック自体を横スワイプで見る（ヒーローのスワイプとは独立したスクロール領域）。 */
.cast-detail-gallery-strip {
  padding: 10px 16px 0;
}
.cast-detail-gallery-strip-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cast-detail-gallery-strip-track::-webkit-scrollbar {
  display: none;
}
.cast-detail-gallery-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition, 0.15s ease), border-color var(--transition, 0.15s ease);
}
.cast-detail-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--accent, #0f1419);
}
.cast-detail-gallery-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像ぼかし連動（2026-07-24）: ヒーロー側が解除されるまでサムネイルも小さくぼかしておく
   （縮小プレビューとはいえ、ぼかし対象の画像をそのまま出さない）。 */
.cast-detail-gallery-thumb.is-blurred .cast-detail-gallery-thumb-img {
  filter: blur(6px);
}

.cast-detail-header {
  padding: 14px 16px 0;
}

.cast-detail-name {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.cast-detail-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.cast-detail-lorebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.cast-detail-lorebook-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg);
}
.cast-detail-lorebook-cover {
  display: grid;
  aspect-ratio: 3 / 4;
  place-items: center;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: center;
}
.cast-detail-lorebook-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cast-detail-lorebook-cover b {
  padding: 16px;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.cast-detail-lorebook-card > div:last-child {
  padding: 10px 12px;
}
.cast-detail-lorebook-card h4,
.cast-detail-lorebook-card p {
  margin: 0;
  overflow-wrap: anywhere;
}
.cast-detail-lorebook-card h4 {
  font-size: 0.95rem;
}
.cast-detail-lorebook-card p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* 「このキャストについて」（2026-07-24）。プロンプト非適用の表示専用・装飾対応欄。
   詳細ページで最も目立つ位置（名前・タグラインの直下）に表示する。 */
.cast-about-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}
.cast-about-text > *:first-child {
  margin-top: 0;
}
.cast-about-text > *:last-child {
  margin-bottom: 0;
}
.cast-about-line {
  margin: 0 0 8px;
}
.cast-about-heading {
  margin: 12px 0 6px;
  font-weight: 700;
}
.cast-about-heading-1 {
  font-size: 1.3em;
}
.cast-about-heading-2 {
  font-size: 1.15em;
}
.cast-about-heading-3 {
  font-size: 1.05em;
}
.cast-about-quote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--cast-hairline, rgba(127, 127, 127, 0.4));
  color: var(--text-secondary);
}
.cast-about-list {
  margin: 8px 0;
  padding-left: 1.3em;
}
.cast-about-list li {
  margin: 2px 0;
}
.cast-about-hr {
  margin: 12px 0;
  border: none;
  border-top: 1px solid var(--cast-hairline, rgba(127, 127, 127, 0.4));
}
.cast-about-text code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.18);
  font-size: 0.9em;
}
.cast-about-text a {
  color: #4dabf7;
  text-decoration: underline;
}

/* 装飾タグ（2026-07-24）。ユーザーが選べるのはこの固定パレット/フォント/サイズだけ
   （生の16進数・CSSプロパティは一切受け付けない。app.js applyCastAboutDecorationTags参照）。 */
.cast-deco-color-pink { color: #ff8fc0; }
.cast-deco-color-red { color: #ff6b6b; }
.cast-deco-color-orange { color: #ffa64d; }
.cast-deco-color-yellow { color: #ffd93d; }
.cast-deco-color-green { color: #6bcf7f; }
.cast-deco-color-teal { color: #4dd0c4; }
.cast-deco-color-blue { color: #5b9dff; }
.cast-deco-color-purple { color: #b98aff; }
.cast-deco-color-brown { color: #c9906a; }
.cast-deco-color-gray { color: #b0b8c1; }
.cast-deco-color-black { color: #1a1a1a; }
.cast-deco-color-white { color: #ffffff; }

.cast-deco-bg-pink { background: #ffe3f0; color: #6b1f45; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-red { background: #ffe1e1; color: #7a1f1f; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-orange { background: #fff0dc; color: #7a4b12; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-yellow { background: #fff6cc; color: #6b5a05; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-green { background: #e2f7e6; color: #1f5c30; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-teal { background: #dbf5f2; color: #1a5c55; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-blue { background: #e2edff; color: #1c3f7a; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-purple { background: #f1e6ff; color: #4a1f7a; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-brown { background: #f0e2d6; color: #5a3a1f; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-gray { background: #eef0f2; color: #33383d; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-black { background: #2a2a2a; color: #ffffff; padding: 0 3px; border-radius: 3px; }
.cast-deco-bg-white { background: #ffffff; color: #1a1a1a; padding: 0 3px; border-radius: 3px; }

/* 段落全体の色付き箱（2026-07-24）。[box-色]〜[/box-色]で囲んだ範囲に使う。
   色の値は.cast-deco-bg-*と揃えている（別々に管理しているのは既存の書き方に合わせたもの）。 */
.cast-about-box {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 12px;
}
.cast-about-box > *:first-child { margin-top: 0; }
.cast-about-box > *:last-child { margin-bottom: 0; }

/* 文字揃え（2026-07-24）。[center]〜[/center] 等で囲んだ範囲に適用する。 */
.cast-about-align-center { text-align: center; }
.cast-about-align-right { text-align: right; }
.cast-about-align-left { text-align: left; }
.cast-about-align-center .cast-about-list,
.cast-about-align-right .cast-about-list {
  display: inline-block;
  text-align: left;
}

.cast-about-box-pink { background: #ffe3f0; color: #6b1f45; }
.cast-about-box-red { background: #ffe1e1; color: #7a1f1f; }
.cast-about-box-orange { background: #fff0dc; color: #7a4b12; }
.cast-about-box-yellow { background: #fff6cc; color: #6b5a05; }
.cast-about-box-green { background: #e2f7e6; color: #1f5c30; }
.cast-about-box-teal { background: #dbf5f2; color: #1a5c55; }
.cast-about-box-blue { background: #e2edff; color: #1c3f7a; }
.cast-about-box-purple { background: #f1e6ff; color: #4a1f7a; }
.cast-about-box-brown { background: #f0e2d6; color: #5a3a1f; }
.cast-about-box-gray { background: #eef0f2; color: #33383d; }
.cast-about-box-black { background: #2a2a2a; color: #ffffff; }
.cast-about-box-white { background: #ffffff; color: #1a1a1a; }

/* 「このキャストについて」欄全体の背景色（2026-07-24）。先頭行に[page-bg-色]と書くと有効になる
   （app.js renderCastAboutText参照）。カード風に見えるようpadding/border-radiusを付ける。 */
.cast-about-page-bg-pink, .cast-about-page-bg-red, .cast-about-page-bg-orange, .cast-about-page-bg-yellow,
.cast-about-page-bg-green, .cast-about-page-bg-teal, .cast-about-page-bg-blue, .cast-about-page-bg-purple,
.cast-about-page-bg-brown, .cast-about-page-bg-gray, .cast-about-page-bg-black, .cast-about-page-bg-white {
  padding: 14px 16px;
  border-radius: 14px;
}
.cast-about-page-bg-pink { background: #ffe3f0; color: #6b1f45; }
.cast-about-page-bg-red { background: #ffe1e1; color: #7a1f1f; }
.cast-about-page-bg-orange { background: #fff0dc; color: #7a4b12; }
.cast-about-page-bg-yellow { background: #fff6cc; color: #6b5a05; }
.cast-about-page-bg-green { background: #e2f7e6; color: #1f5c30; }
.cast-about-page-bg-teal { background: #dbf5f2; color: #1a5c55; }
.cast-about-page-bg-blue { background: #e2edff; color: #1c3f7a; }
.cast-about-page-bg-purple { background: #f1e6ff; color: #4a1f7a; }
.cast-about-page-bg-brown { background: #f0e2d6; color: #5a3a1f; }
.cast-about-page-bg-gray { background: #eef0f2; color: #33383d; }
.cast-about-page-bg-black { background: #2a2a2a; color: #ffffff; }
.cast-about-page-bg-white { background: #ffffff; color: #1a1a1a; }

.cast-deco-font-round { font-family: "Zen Maru Gothic", "Rounded Mplus 1c", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif; }
.cast-deco-font-serif { font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; }
.cast-deco-font-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
/* 日本語フォントの追加バリエーション（2026-07-24、外部フォント読み込み無し・端末に入っている
   システムフォントのみを指定。無ければ末尾の汎用フォントへ自然にフォールバックする）。 */
.cast-deco-font-gothic { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; }
.cast-deco-font-pop { font-family: "Klee One", Klee, "Rounded Mplus 1c", "Hiragino Maru Gothic ProN", sans-serif; }
.cast-deco-font-kyokasho { font-family: "UD Digital Kyokasho NK-R", "BIZ UDGothic", "Yu Gothic", sans-serif; }

.cast-deco-size-small { font-size: 0.82em; }
.cast-deco-size-large { font-size: 1.35em; }
.cast-deco-size-huge { font-size: 1.9em; }

.cast-detail-section {
  padding: 18px 16px 0;
}

.cast-detail-section-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* 「このキャストについて」は.cast-detail-sectionでなく.cast-detail-header内にあるため
   （最も目立つ位置に置くための意図的な配置）、見出し自体に少し上マージンを足す。 */
.cast-about-title {
  margin-top: 6px;
}

.cast-detail-situation {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cast-detail-profile-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cast-detail-profile-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: baseline;
}

.cast-detail-profile-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cast-detail-profile-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}


.cast-detail-intro-preview {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

/* 作成フォームで入力したイントロ内の単一改行を、詳細ページの試し読みでも保持する。
   チャット本体は改行を <br> に変換済みなので、詳細ページのプレビューだけに限定する。 */
.cast-detail-intro-preview .cast-novel-narration,
.cast-detail-intro-preview .cast-novel-dialogue-body {
  white-space: pre-wrap;
}

/* PR-C: ユーザーキャラ詳細の作者表示・「設定を見る」・通報導線。既存の.cast-detail-*と
   同じ var(--text)/var(--text-secondary)/var(--border) トークン経由で、#cast-detail-view
   スコープのライト固定＋ :root[data-theme="dark"] 上書き（上のブロック）にそのまま乗る。 */
.cast-detail-author {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* 作者名は以前からタップで作者プロフィールへ飛べたが、見た目が地の文と同じで
   押せることが伝わっていなかった（2026-08-03）。ハンドル部分だけ下線＋本文色にして
   リンクだと分かるようにする。遷移先は作者プロフィールの「キャスト」タブ。 */
.cast-detail-author-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 本人限定の秘匿トグル注記（「キャラ設定は非公開です」「作者名は非公開です」）。
   他人には出ないので目立たせる必要はなく、cast-detail-author相当の控えめな見た目にする。 */
.cast-detail-owner-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 非公開のまま気づかない問題への注記（要望#34、2026-08-03）。本人にしか出ないが、
   「作ったのに誰にも見えていない」ことに気づかせるのが目的なので owner-hint より一段強い。
   罫線で区切るだけ（塗り分け・ピルは使わない）。 */
.cast-detail-private-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cast-detail-private-notice-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.cast-detail-private-notice-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.cast-detail-settings {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.cast-detail-settings-summary {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.cast-detail-settings-summary::-webkit-details-marker {
  display: none;
}

/* 要望#90（2026-08-06）: 折りたたみを開かなくても一部非公開だと分かるよう、
   summaryラベルの脇に添える注記。cast-detail-owner-hint相当の控えめな見た目にする。 */
.cast-detail-settings-hidden-note {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}

.cast-detail-settings-body {
  padding: 0 14px 14px;
}

.cast-detail-settings-subtitle {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cast-detail-settings-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cast-detail-tone-row {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.cast-detail-tone-row:first-of-type {
  border-top: 0;
}

.cast-detail-tone-situation {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.cast-detail-tone-example {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cast-detail-report-row {
  padding: 18px 16px 0;
  display: flex;
  justify-content: center;
}

.cast-detail-report-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cast-detail-bottom-spacer {
  height: 88px;
}

.cast-detail-sticky-cta {
  position: sticky;
  /* --app-bottom-offset: サイクル1(ボトムバー導入)以降、cast非チャット画面では
     body.cast-header-active が safe-area のみに上書きするため、CTAは画面下端に接地する
     （SNS側bottom-navはcast画面では非表示）。 */
  bottom: var(--app-bottom-offset, 0px);
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cast-detail-ctabar-bg, rgba(255, 255, 255, 0.96));
  border-top: 1px solid var(--border);
}

/* キャラシェアボタン（2026-07-18）: CTAと同じ高さの正方形アウトラインボタン。
   中のSVG（ICON_SHARE、act-btn用）はサイズ指定を持たないためここで明示する。 */
.cast-detail-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  height: 48px;
  border: 1px solid var(--border);
  /* zeta比較パス3: CTA帯のボタン角丸はzetaに合わせて12px */
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.cast-detail-share-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* お気に入りボタン（2026-07-24）: シェアボタンと同じ正方形ボタン。ブックマークと同じ
   アイコン・見た目（塗り/線のみの出し分け）で「保存する」概念を統一する。 */
.cast-detail-favorite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.cast-detail-favorite-btn.is-active {
  border-color: var(--accent, #0f1419);
  color: var(--accent, #0f1419);
}
.cast-detail-favorite-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cast-detail-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent, #0f1419);
  color: var(--cast-detail-cta-text, #fff);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* AI Cast キャラ詳細ページ zeta白版（.ai/current-task.md 2026-07-16 P5）。紙テーマ(P4)は
   全廃し、トークン正本(CAST_DESIGN_TOKENS.md)の白版に統一。上の.cast-detail-*各ルールは
   var(--bg)/var(--text)等の共通テーマ変数経由で色を出しているため、#cast-detail-view
   スコープでその変数を白系の値に上書きするだけで地色・本文色・イントロ試し読み
   （.cast-novel-*、同じく変数経由）まで揃う（個別ルールの複製はしない。Zetter本体・
   #cast-home-viewの変数は不変）。
   2026-07-17 オーナー指示でダーク対応を追加: このブロックはライト固定のまま変更しない
   （ライトモードの解決値をピクセル単位で維持するため）。ダーク値は下の
   :root[data-theme="dark"] #cast-detail-view で上書きする（IDセレクタ+属性セレクタで
   このブロックよりCSS詳細度が高いため、ソース順に関わらずダーク時はそちらが勝つ）。 */
#cast-detail-view {
  --bg: #ffffff;
  --bg-secondary: #f6f6f7;
  --bg-hover: #f6f6f7;
  --border: #e7e7e9;
  --text: #1c1c1e;
  --text-secondary: rgba(0, 0, 0, 0.62);
  --text-soft: rgba(0, 0, 0, 0.45);
  --accent: #1c1c1e;
  --primary: #1c1c1e;
  /* AI Cast 共通ヘッダー（2026-07-17）用。#cast-home-view等と同じCAST_DESIGN_TOKENS値。 */
  --cast-bg: #ffffff;
  --cast-ink: #1c1c1e;
  --cast-sub: rgba(0, 0, 0, 0.62);
  --cast-hairline: rgba(0, 0, 0, 0.1);
  --cast-detail-cta-text: #ffffff;
  --cast-detail-ctabar-bg: rgba(255, 255, 255, 0.96);
  /* Codex指摘(PR #273 P2): イントロ試し読み(.cast-novel-dialogue-body)は
     var(--cast-novel-bubble-bg, #f7f9f9) を参照するが、このスコープでは元々未定義で
     フォールバックのライト値 #f7f9f9 に固定されていた（ダークでも明地のまま）。
     このブロックで明示的に定義し、ダーク側でも正しく切り替わるようにする。 */
  --cast-novel-bubble-bg: #f6f6f7;
  background: var(--bg);
}

:root[data-theme="dark"] #cast-detail-view {
  --bg: #050506;
  --bg-secondary: #111113;
  --bg-hover: #1a1a1d;
  --border: rgba(255, 255, 255, 0.07);
  --text: #f2f3f5;
  --text-secondary: rgba(242, 243, 245, 0.64);
  --text-soft: rgba(242, 243, 245, 0.42);
  --accent: #3d8bff;
  --primary: #3d8bff;
  --cast-bg: #050506;
  --cast-ink: #f2f3f5;
  --cast-sub: rgba(242, 243, 245, 0.64);
  --cast-hairline: rgba(255, 255, 255, 0.07);
  --cast-detail-cta-text: #f2f3f5;
  --cast-detail-ctabar-bg: rgba(5, 5, 6, 0.92);
  --cast-novel-bubble-bg: #111113;
}

/* PR-B（cast ユーザーキャラ作成機能）: /cast「自分のキャラ」セクション。#cast-home-view内に
   居るため、周囲の --cast-* トークン（zeta白版＋ダーク切替）をそのまま使う。 */
#cast-home-view .cast-mine-section,
#cast-mine-view .cast-mine-section,
#cast-profile-view .cast-mine-section {
  padding: 4px 16px 16px;
  border-bottom: 1px solid var(--cast-hairline);
}


:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-tag-pill {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--cast-sub);
  cursor: pointer;
}

:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-tag-pill.active {
  background: var(--cast-cta-bg);
  color: var(--cast-cta-text);
  font-weight: 600;
}

/* 検索画面のおすすめ/最近ワードはzeta同様の塗りチップ（ホームの未選択プレーンテキストとは別形状） */
#cast-search-view .cast-search-words .cast-tag-pill {
  background: var(--bg-secondary);
  color: var(--cast-ink);
  padding: 9px 14px;
}

/* 無限スクロールの番兵（2026-07-30。「もっと見る」ボタンを廃止し、この不可視の
   高さだけの器をIntersectionObserverの監視対象にする。読み込み中だけ控えめな
   スピナーを出す。ランキングタブ(10件固定)では出さない。 */
#cast-home-view .cast-home-more-sentinel {
  display: flex;
  justify-content: center;
  padding: 16px 0 24px;
  min-height: 1px;
}

#cast-home-view .cast-official-section {
  padding: 16px 0 0;
}

#cast-home-view .cast-official-section .cast-section-title {
  padding: 0 16px;
}

/* PR-C（cast 公開ギャラリー）: 「みんなのキャラ」。#cast-official-section と同じ余白・
   グリッド（.cast-character-grid）を再利用する。 */
#cast-home-view .cast-public-section {
  /* サイクル2: 統合グリッド化でピル行直下に来るため上余白はグリッド側(12px)に任せる */
  padding: 0 0 24px;
}

/* V2 の匿名一覧は共通の公開セクション余白を上書きし、見出しを画面端から離す。 */
#cast-home-view .cast-public-section.cast-anonymous-directory {
  padding: var(--s4);
}

#cast-home-view .cast-public-section .cast-section-title {
  padding: 0 16px;
  /* 人気/新着の2セクション見出し。上のグリッド(padding 12px)と合わせて区切りを作る */
  margin-top: 8px;
}

/* ランキングのデイリー/週間/全体サブタブ（2026-08-04）。.cast-mine-tab-toggle本体
   （召喚ページの自分のキャスト/お気に入りタブ）をそのまま流用し、位置調整だけこの
   セクション用に上書きする。値は同セクション内の.cast-section-title（padding 0 16px /
   margin-top 8px）と揃え、新しい寸法は発明しない。 */
#cast-home-view .cast-public-section .cast-mine-tab-toggle {
  justify-content: flex-start;
  padding: 0 16px;
  margin: 8px 0 0;
}

/* 公式バッジ（サイクル2）: NEW（半透明チップ地）と区別するためCTA色のベタ地で反転表示 */
:is(#cast-home-view, #cast-search-view, .profile-casts) .cast-character-badge-official {
  /* 2026-08-08: 黒/白のCTA色からブランドの青へ。他のバッジと同じく白文字で AA を確保する。 */
  background: var(--cast-badge-official-bg);
  color: #ffffff;
}

#cast-home-view .cast-mine-section-header,
#cast-mine-view .cast-mine-section-header,
#cast-profile-view .cast-mine-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

#cast-home-view .cast-section-title,
#cast-mine-view .cast-section-title,
#cast-profile-view .cast-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink);
}

#cast-home-view .cast-create-cta-btn,
#cast-mine-view .cast-create-cta-btn,
#cast-profile-view .cast-create-cta-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--cast-hairline);
  border-radius: 6px;
  background: var(--cast-cta-bg);
  color: var(--cast-cta-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#cast-home-view .cast-mine-empty,
#cast-mine-view .cast-mine-empty,
#cast-profile-view .cast-mine-empty {
  margin: 0;
  font-size: 13px;
  color: var(--cast-sub);
}

#cast-home-view .cast-mine-list,
#cast-mine-view .cast-mine-list,
#cast-profile-view .cast-mine-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#cast-home-view .cast-mine-row,
#cast-mine-view .cast-mine-row,
#cast-profile-view .cast-mine-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--cast-hairline);
  border-radius: 10px;
  background: var(--cast-bg);
}

#cast-home-view .cast-mine-row-main,
#cast-mine-view .cast-mine-row-main,
#cast-profile-view .cast-mine-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

#cast-home-view .cast-mine-row-avatar,
#cast-mine-view .cast-mine-row-avatar,
#cast-profile-view .cast-mine-row-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cast-hairline);
}

#cast-home-view .cast-mine-row-avatar img,
#cast-mine-view .cast-mine-row-avatar img,
#cast-profile-view .cast-mine-row-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-home-view .cast-mine-row-body,
#cast-mine-view .cast-mine-row-body,
#cast-profile-view .cast-mine-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#cast-home-view .cast-mine-row-name,
#cast-mine-view .cast-mine-row-name,
#cast-profile-view .cast-mine-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cast-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cast-home-view .cast-mine-row-status,
#cast-mine-view .cast-mine-row-status,
#cast-profile-view .cast-mine-row-status {
  font-size: 11px;
  color: var(--cast-sub);
}

#cast-home-view .cast-mine-row-status-public,
#cast-mine-view .cast-mine-row-status-public,
#cast-profile-view .cast-mine-row-status-public {
  color: var(--cast-ink);
  font-weight: 600;
}

#cast-home-view .cast-mine-row-actions,
#cast-mine-view .cast-mine-row-actions,
#cast-profile-view .cast-mine-row-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

#cast-home-view .cast-mine-action-btn,
#cast-mine-view .cast-mine-action-btn,
#cast-profile-view .cast-mine-action-btn {
  padding: 6px 10px;
  border: 1px solid var(--cast-hairline);
  border-radius: 6px;
  background: transparent;
  color: var(--cast-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#cast-home-view .cast-mine-action-btn-danger,
#cast-mine-view .cast-mine-action-btn-danger,
#cast-profile-view .cast-mine-action-btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 25%, var(--cast-hairline));
}

/* PR-B: /cast/create（新規・編集）。#cast-create-view は独立ビューなので、cast-home/detailの
   ような強制白トークンは使わず、通常のアプリ共通テーマ変数（--bg/--text系）で
   ダーク/ライト両対応する（rubric要求）。
   2026-07-17（紹介タブ磨き込み）: 紹介タブ先頭のライブプレビューカード
   （.cast-create-preview-*）とアバターバッジ（.cast-create-avatar-badge）だけは
   /cast ギャラリーカードと同じ見た目を再現する必要があるため、#cast-home-view と
   同じ --cast-* トークン（CAST_DESIGN_TOKENS.md）をこのスコープにも定義する。
   フォームのその他のUI（ラベル・入力欄など）はこれまで通り --bg/--text系のまま。 */
#cast-create-view {
  --cast-bg: #ffffff;
  --cast-ink: #1c1c1e;
  --cast-sub: rgba(0, 0, 0, 0.62);
  --cast-faint: rgba(0, 0, 0, 0.45);
  --cast-hairline: rgba(0, 0, 0, 0.1);
  --cast-chip-bg: rgba(28, 28, 30, 0.72);
  display: flex;
  flex-direction: column;
  /* 親(main/.app)がheight:autoのため100%は潰れてコンテンツ高さになり、短いステップで
     下部ナビの下に大穴が空く（実報告 2026-07-21）。ビューポート実寸で固定し、
     ヘッダー固定・中身スクロール・下部ナビ常時最下部のアプリ型レイアウトにする。 */
  height: 100vh;
  height: 100dvh;
  /* 外側の画面枠はクリップし、入力領域以外をスクロール面にしない。 */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] #cast-create-view {
  --cast-bg: #151516;
  --cast-ink: #e5e7eb;
  --cast-sub: rgba(255, 255, 255, 0.68);
  --cast-faint: rgba(255, 255, 255, 0.48);
  --cast-hairline: rgba(255, 255, 255, 0.1);
}

/* ネイティブアプリ型シェル（2026-07-25 オーナー要望「スクロールすべき要素だけを
   スクロールさせる」）。ヘッダー・ステップタブ・下部バーは #cast-create-view 直下の
   固定行で、実際に動くのはこの .cast-create-scroll だけ。
   body側のパディング由来のウィンドウスクロールは body.cast-create-active で殺している
   （下の body ルール参照）。overscroll-behavior-y:none で内側の端のゴム挙動と
   親（ウィンドウ／PWAシェル）へのスクロール連鎖も止める。 */
#cast-create-view .cast-create-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  /* 最後の項目が下部バーの縁にぴったり付かないよう、末尾だけ余白を持たせる。
     （旧 .cast-create-bottom-spacer の88pxは、バーが本文に重なっていた頃の名残で
     大きすぎた。バーが独立した行になった今は普通の余白で足りる。） */
  padding-bottom: var(--cast-editor-space-lg);
}

/* シェルの固定行。flexの既定 (flex-shrink:1) のままだと、中身が長いときに
   タブや下部バーが数px潰れて高さが揃わなくなる。 */
#cast-create-view > .cast-header-bar,
#cast-create-view > .cast-summon-chips,
#cast-create-view > .cast-summon-step-header,
#cast-create-view > .cast-create-sticky-bar {
  flex: 0 0 auto;
}

/* 作成/編集フォーム滞在中はウィンドウ自体をスクロールさせない。
   通常ビュー用の body { padding-bottom: 54px+safe }（SNSの下部ナビ分）が残っていると、
   100dvh のシェルの下に54pxの余白ができ、スワイプでシェル全体が上へずれる。
   body に overflow:hidden は敢えて付けない。チャット画面も同じシェル構造で
   padding-bottom:0 だけで成立しており（body.chat-view-active）、iOSで入力欄に
   フォーカスしたときのブラウザ側のスクロール補正を潰したくないため。 */
body.cast-create-active {
  padding-bottom: 0;
}

#cast-create-view .cast-create-error {
  margin: var(--cast-editor-space-lg) var(--cast-editor-space-lg) 0;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 13px;
}

#cast-create-view .cast-create-legacy-source {
  margin: 0 0 var(--cast-editor-space-lg);
  padding: var(--cast-editor-space-md);
}
#cast-create-view .cast-create-legacy-source summary {
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
}
#cast-create-view .cast-create-legacy-source p {
  margin: var(--cast-editor-space-sm) 0;
  color: var(--text-secondary);
  font-size: 13px;
}
#cast-create-view .cast-create-legacy-source textarea {
  width: 100%;
}

/* ステップタブ（2026-07-25 刷新）: 5つ固定なので横スクロールをやめ、等幅5分割の
   セグメントにして必ず1画面に収める。旧デザインは番号丸付きの大きなピルが横に溢れ、
   5つ目「公開」が画面外に切れていた。アクティブ表示は塗りつぶしではなく下線
   （トークン正本の「装飾ゼロのフラット」に合わせ、面で主張させない）。 */
#cast-create-view .cast-summon-chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 0;
  /* 縦スクロールしてもタブが消えないよう固定する（2026-07-23 オーナー要望）。
     2026-07-25: スクロール領域内のstickyをやめ、シェル直下の固定行に出した。
     sticky時代は「スクロールできる箱の中で貼り付いている」状態で、慣性スクロールの
     行き過ぎで一瞬浮くことがあった。 */
  background: var(--cast-bg);
  border-bottom: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-summon-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 0 var(--cast-editor-space-xs);
  border: 0;
  background: transparent;
  color: var(--cast-sub);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cast-create-view .cast-summon-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cast-create-view .cast-summon-chip.active {
  color: var(--cast-ink);
  font-weight: 700;
}

/* 下線はタブ幅いっぱいではなく文字幅に近い長さにして、切り替わりを軽く見せる */
#cast-create-view .cast-summon-chip.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cast-ink);
}

/* ラクラク召喚の見出し行。2026-07-25にシェル直下の固定行へ出したので、
   スクロールする本文と地続きに見えないよう下端に髪の毛線を引く。 */
#cast-create-view .cast-summon-step-header {
  display: flex;
  align-items: baseline;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-md);
  background: var(--cast-bg);
  border-bottom: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-summon-step-mode {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

#cast-create-view .cast-summon-step-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 導入②: 召喚方法の選択。中央寄せの同格カード2枚だと「どちらでもいい2択」に見えて
   迷わせるので、左揃えの行カードにして、おすすめ側だけ枠を立てる（2026-07-25）。 */
#cast-create-view .cast-summon-select {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-md);
}

#cast-create-view .cast-summon-select .cast-summon-page {
  padding: 0;
}

#cast-create-view .cast-summon-mode-card {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-md);
  width: 100%;
  padding: var(--cast-editor-space-lg);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  background: var(--cast-bg);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cast-create-view .cast-summon-mode-card.is-recommended {
  border-color: var(--cast-ink);
}

#cast-create-view .cast-summon-mode-card:active {
  background: var(--cast-hairline);
}

#cast-create-view .cast-summon-mode-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-summon-mode-head {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-summon-mode-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--cast-ink);
}

#cast-create-view .cast-summon-mode-badge {
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-sm);
  border-radius: 999px;
  background: var(--cast-ink);
  color: var(--cast-bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#cast-create-view .cast-summon-mode-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
}

#cast-create-view .cast-summon-mode-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--cast-faint);
}

#cast-create-view .cast-summon-mode-chevron {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--cast-faint);
}

/* 召喚フローの各ページ共通の見出し（2026-07-25）。ページ見出しは共通タイポグラフィに揃える。 */
#cast-create-view .cast-summon-page {
  padding: var(--s1) 0;
}

#cast-create-view .cast-summon-page-title {
  margin: 0;
  font-size: var(--type-page-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--type-heading-track);
  color: var(--cast-ink);
}

#cast-create-view .cast-summon-page-lead {
  margin: var(--s2) 0 var(--s4);
  font-size: var(--type-body-size);
  line-height: var(--type-line-height);
  color: var(--text);
}

#cast-create-view .cast-summon-page-hint {
  margin: var(--s3) 0 0;
  font-size: var(--type-support-size);
  line-height: var(--type-line-height);
  color: var(--text-secondary);
  text-align: center;
}

/* 注意事項: 太字が文中に散った箇条書きをやめ、「何が禁止か」を見出しで拾えるようにする。 */
#cast-create-view .cast-summon-rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-summon-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-md) 0;
  border-bottom: 1px solid var(--cast-hairline);
}

/* 禁止/注意マーク。塗りピルをやめて線の枠に（塗って区別しない・ピルで包まない規範、
   2026-07-30）。強弱は枠線と文字の濃さだけで作る。 */
#cast-create-view .cast-summon-rule-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-sm);
  margin-top: var(--cast-editor-space-xs);
  border: 1px solid;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  background: transparent;
}

#cast-create-view .cast-summon-rule-mark-ban {
  border-color: var(--cast-ink);
  color: var(--cast-ink);
}

#cast-create-view .cast-summon-rule-mark-note {
  border-color: var(--cast-faint);
  color: var(--cast-sub);
}

#cast-create-view .cast-summon-rule-body {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-xs);
  min-width: 0;
}

#cast-create-view .cast-summon-rule-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--cast-ink);
}

#cast-create-view .cast-summon-rule-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
}

/* ラクラク召喚②の見た目ピッカー（貼り付けページ内。コンパクトに横長タイル） */
#cast-create-view .cast-summon-looks {
  margin-top: var(--cast-editor-space-xl);
  padding-top: var(--cast-editor-space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
}

/* .cast-create-preview-media（aspect 3/4）と同じ要素に付くため、詳細度を上げて
   ラクラク召喚のタイルだけ横長コンパクトにする（ソース順では負けるので親クラスで限定） */
/* ラクラク召喚の「見た目」タイル。**枠の比率は、その画像が実際に表示される場所の比率に
   合わせる**（2026-08-08 オーナー指摘）。以前はカバーも背景も一律 16/9 の横長枠だったため、
   カバーに縦長画像を入れると枠内では上下が切れて見え、実際の一覧カード(3/4)・詳細ページ
   (13/19)ではきちんと出る、という食い違いが起きていた（選ぶ時点で仕上がりが読めない）。
   カバーは .cast-create-preview-media の 3/4 をそのまま使う——マニュアル召喚の「見た目」タブの
   カバー枠が元々その比率なので、これで2つの入口の見え方も揃う。 */
#cast-create-view .cast-summon-looks .cast-summon-looks-tile {
  border-radius: 12px;
}

/* チャット背景だけは横長のまま。チャット画面の背景として敷かれるもので、カバーとは
   用途も表示先も違うため巻き込まない。 */
#cast-create-view .cast-summon-looks .cast-summon-looks-tile-wide {
  aspect-ratio: 16 / 9;
}

/* ラクラク召喚の結果画面（作成済み: 公開する/編集する） */
#cast-create-view .cast-summon-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-xl) var(--cast-editor-space-lg);
  min-height: min(62vh, 560px);
  text-align: center;
}

/* 生まれたキャストの顔をここで一度見せる（名前だけだと手応えが無い）。 */
#cast-create-view .cast-summon-result-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--cast-editor-space-sm);
  border-radius: 50%;
  overflow: hidden;
  background: var(--cast-hairline);
}

#cast-create-view .cast-summon-result-face-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」で頭文字1字から変更）。親の96px円いっぱいに
   #cfd9deを敷き、中身は.avatar-icon（DEFAULT_AVATAR_SVG）に揃える。 */
#cast-create-view .cast-summon-result-face-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #cfd9de;
}

#cast-create-view .cast-summon-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--cast-faint);
}

#cast-create-view .cast-summon-result-name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cast-ink);
  overflow-wrap: anywhere;
}

#cast-create-view .cast-summon-result-tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cast-sub);
  max-width: 420px;
}

#cast-create-view .cast-summon-result-note {
  margin: var(--cast-editor-space-sm) 0 var(--cast-editor-space-md);
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
  max-width: 420px;
}

#cast-create-view .cast-summon-result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
  width: 100%;
  max-width: 320px;
}

#cast-create-view .cast-summon-result-primary {
  padding: var(--cast-editor-space-md) var(--cast-editor-space-lg);
  font-size: 15px;
}

#cast-create-view .cast-summon-result-secondary {
  padding: var(--cast-editor-space-md) var(--cast-editor-space-lg);
}

#cast-create-view .cast-create-tab-body {
  padding: var(--cast-editor-space-md);
}

#cast-create-view .cast-create-tab-hint {
  margin: 0 0 var(--cast-editor-space-md);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* キャストのモード2択（castモード分割v1、docs/cast-mode-split-design.md §5）。
   召喚方法カード（.cast-summon-mode-card）と同じ「左揃えの行カード＋枠線で強調」の流儀に
   揃える。選択中は枠線を濃くしてチェックを出すだけで、塗りつぶしのバッジは使わない。 */
#cast-create-view .cast-create-mode-options {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
  margin-bottom: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-mode-option {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-md);
  width: 100%;
  padding: var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  background: var(--cast-bg);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cast-create-view .cast-create-mode-option.is-selected {
  border-color: var(--cast-ink);
}

#cast-create-view .cast-create-mode-option:active {
  background: var(--cast-hairline);
}

#cast-create-view .cast-create-mode-option-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-xs);
}

#cast-create-view .cast-create-mode-option-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cast-ink);
}

#cast-create-view .cast-create-mode-option-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
}

#cast-create-view .cast-create-mode-option-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cast-ink);
}

/* cast v2-lite（複数キャスト共演）: 編集フォームの「共演」枠。選択肢の見た目は
   モード2択（.cast-create-mode-option）をそのまま流用し、ここでは並びと現在値の行だけ足す。 */
#cast-create-view .cast-create-costar-current {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-md);
  margin-bottom: var(--cast-editor-space-sm);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
}

#cast-create-view .cast-create-costar-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cast-ink);
  overflow-wrap: anywhere;
}

#cast-create-view .cast-create-costar-tools {
  flex-shrink: 0;
  display: flex;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-costar-picker {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
  margin-bottom: var(--cast-editor-space-sm);
}

/* 本体の「保存する」とは別の保存なので、下部バーの主ボタンより控えめに置く。 */
#cast-create-view .cast-create-costar-save {
  width: 100%;
  margin-bottom: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-costar-error {
  margin: 0 0 var(--cast-editor-space-sm);
  font-size: 12px;
  line-height: 1.7;
  color: var(--danger, #d93025);
}

#cast-create-view .cast-create-field-hint {
  margin: 0 0 var(--cast-editor-space-sm);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}
#cast-create-view .cast-create-field-hint code {
  padding: var(--cast-editor-space-xs);
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.18);
  font-size: 0.95em;
}

/* 「このキャストについて」のリアルタイムプレビュー（2026-07-24）。 */
#cast-create-view .cast-create-preview-label {
  margin: var(--cast-editor-space-sm) 0 var(--cast-editor-space-xs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
#cast-create-view .cast-about-preview {
  min-height: 44px;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  border: 1px dashed var(--cast-hairline, rgba(127, 127, 127, 0.4));
  border-radius: 10px;
  margin: 0;
}
#cast-create-view .cast-about-preview-empty {
  color: var(--text-secondary);
  font-size: 13px;
}

/* 対応形式一覧のワンタップコピー（2026-07-24）。手打ちが面倒な人がChatGPT等に貼れるように。 */
#cast-create-view .cast-about-format-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cast-editor-space-sm);
  width: 100%;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  margin-bottom: var(--cast-editor-space-sm);
  border: 1px solid var(--cast-hairline, rgba(127, 127, 127, 0.4));
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

#cast-create-view .cast-create-tab-empty {
  margin: 0 0 var(--cast-editor-space-md);
  font-size: 13px;
  color: var(--text-secondary);
}

#cast-create-view .cast-create-field {
  margin-bottom: var(--cast-editor-space-lg);
}

/* :not() で除外するのは、スイッチ行そのものが <label> であるため。除外しないと
   この汎用ルールの方が詳細度で勝ち、display:block が効いてスイッチが崩れる。 */
#cast-create-view .cast-create-field label:not(.cast-create-switch-row) {
  display: block;
  margin-bottom: var(--cast-editor-space-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--cast-ink);
}

/* 「必須」は赤で主張させない（赤は本物のエラーのためにとっておく）。 */
#cast-create-view .cast-create-required {
  margin-left: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-sm);
  border-radius: 999px;
  background: var(--cast-hairline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cast-sub);
  vertical-align: 1px;
}

/* 入力欄の直前に置く一行の補足。ラベル(ink)より弱く、入力欄より前に読ませる。 */
#cast-create-view .cast-create-field-desc {
  margin: 0 0 var(--cast-editor-space-sm);
  font-size: 12px;
  line-height: 1.6;
  color: var(--cast-sub);
}
#cast-create-view .cast-create-field-desc code {
  padding: var(--cast-editor-space-xs);
  border-radius: 4px;
  background: var(--cast-hairline);
  font-size: 0.95em;
}

/* ステップ内の見出し。「一覧に出る情報」と「AIに渡す設定」の境目を作る。 */
#cast-create-view .cast-create-section-head {
  margin: var(--cast-editor-space-xs) 0 var(--cast-editor-space-md);
}
#cast-create-view .cast-create-section-head + .cast-create-field,
#cast-create-view .cast-create-section-head + .cast-create-switch-list {
  margin-top: 0;
}
#cast-create-view .cast-create-field + .cast-create-section-head,
#cast-create-view .cast-create-switch-list + .cast-create-section-head,
#cast-create-view .cast-create-preview-wrap + .cast-create-section-head {
  margin-top: var(--cast-editor-space-lg);
  padding-top: var(--cast-editor-space-lg);
  border-top: 1px solid var(--cast-hairline);
}
#cast-create-view .cast-create-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: var(--cast-ink);
}
#cast-create-view .cast-create-section-desc {
  margin: var(--cast-editor-space-xs) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cast-sub);
}

#cast-create-view .cast-create-tab-count {
  margin: 0 0 var(--cast-editor-space-md);
  font-size: 12px;
  color: var(--cast-faint);
  font-variant-numeric: tabular-nums;
}

/* 書式ヘルプの折りたたみ。既定は閉じ、開きたい人だけ開く。 */
#cast-create-view .cast-create-help {
  margin: 0 0 var(--cast-editor-space-sm);
}
#cast-create-view .cast-create-help-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-xs) 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cast-sub);
  cursor: pointer;
  list-style: none;
}
#cast-create-view .cast-create-help-summary::-webkit-details-marker {
  display: none;
}
#cast-create-view .cast-create-help-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: transform 0.18s ease;
}
#cast-create-view .cast-create-help-chevron .cast-icon {
  display: block;
  width: 14px;
  height: 14px;
}
#cast-create-view .cast-create-help[open] .cast-create-help-chevron {
  transform: rotate(180deg);
}
#cast-create-view .cast-create-help-body {
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md) var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
}

/* 公開設定などのスイッチ行。行のどこを押しても切り替わる（labelでinputを包んでいる）。 */
#cast-create-view .cast-create-switch-list {
  margin-bottom: var(--cast-editor-space-lg);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  overflow: hidden;
}
#cast-create-view .cast-create-switch-row {
  /* 中の checkbox を position:absolute で視覚的に隠しているので、包含ブロックをここに固定する
     （relative が無いと祖先を基準に飛ぶ）。 */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#cast-create-view .cast-create-switch-list .cast-create-switch-row + .cast-create-switch-row {
  border-top: 1px solid var(--cast-hairline);
}
#cast-create-view .cast-create-switch-row-compact {
  margin-top: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
}
/* 画像の付随オプションなので、セクション見出しと張り合わない字面にする。 */
#cast-create-view .cast-create-switch-row-compact .cast-create-switch-title {
  font-size: 13px;
  font-weight: 500;
}
#cast-create-view .cast-create-switch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-xs);
}
#cast-create-view .cast-create-switch-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--cast-ink);
}
#cast-create-view .cast-create-switch-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cast-sub);
}
/* 要望#90（2026-08-06）: 現在OFF（非公開）の秘匿トグルに添える注記。descと同じ見た目で1行足す。 */
#cast-create-view .cast-create-switch-hidden-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cast-sub);
}
/* 実体のcheckboxは隠すが、キーボード操作とinputイベントのために残す（消さない）。 */
#cast-create-view .cast-create-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#cast-create-view .cast-create-switch-track {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--cast-hairline);
  transition: background 0.18s ease;
}
#cast-create-view .cast-create-switch-thumb {
  position: absolute;
  top: var(--cast-editor-space-xs);
  left: var(--cast-editor-space-xs);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cast-bg);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.28);
  transition: transform 0.18s ease;
}
#cast-create-view .cast-create-switch-input:checked ~ .cast-create-switch-track {
  background: var(--cast-ink);
}
#cast-create-view .cast-create-switch-input:checked ~ .cast-create-switch-track .cast-create-switch-thumb {
  transform: translateX(18px);
}
#cast-create-view .cast-create-switch-input:focus-visible ~ .cast-create-switch-track {
  outline: 2px solid var(--cast-ink);
  outline-offset: 2px;
}

/* 入力欄: 塗りつぶしをやめ、白地＋hairline枠に。フォーカスで枠だけinkにする
   （トークン正本どおり影・グラデーションは使わない）。 */
#cast-create-view .cast-create-input,
#cast-create-view .cast-create-textarea {
  display: block;
  width: 100%;
  padding: var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  background: var(--cast-bg);
  color: var(--cast-ink);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

#cast-create-view .cast-create-input::placeholder,
#cast-create-view .cast-create-textarea::placeholder {
  color: var(--cast-faint);
}

#cast-create-view .cast-create-input:focus,
#cast-create-view .cast-create-textarea:focus {
  outline: none;
  border-color: var(--cast-ink);
}

#cast-create-view .cast-create-textarea {
  /* 高さは autoGrowCastCreateTextarea() が中身に合わせて設定する。手動リサイズは
     その計算とけんかするので無効化する。 */
  resize: none;
  line-height: 1.7;
  min-height: 44px;
}

#cast-create-view .cast-create-counter {
  display: block;
  margin-top: var(--cast-editor-space-sm);
  font-size: 11px;
  color: var(--cast-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#cast-create-view .cast-create-counter.is-near-limit {
  color: var(--danger);
}

/* 口調サンプル / イントロの1件。塗りつぶしのグレー箱をやめ、白地＋hairline枠のカードに
   （入力欄と同じ地色になるので、枠の内側に余白を多めに取って入れ子を成立させる）。 */
#cast-create-view .cast-create-tone-item,
#cast-create-view .cast-create-intro-item {
  margin-bottom: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  background: var(--cast-bg);
}

#cast-create-view .cast-create-tone-item .cast-create-field:last-child,
#cast-create-view .cast-create-intro-item .cast-create-field:last-child {
  margin-bottom: 0;
}

#cast-create-view .cast-create-tone-item-header,
#cast-create-view .cast-create-intro-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cast-editor-space-sm);
  margin-bottom: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-tone-item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--cast-editor-space-sm);
  border-radius: 999px;
  background: var(--cast-hairline);
  font-size: 11px;
  font-weight: 700;
  color: var(--cast-sub);
  font-variant-numeric: tabular-nums;
}

#cast-create-view .cast-create-intro-item-tools {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-xs);
}

/* 雑談モード（castモード分割v1）ではパート種別を切り替えられないので、同じ位置に
   押せない表示だけを置く。枠を持たせず、押せるピル（下の kind-btn）と見分けが付くようにする。 */
#cast-create-view .cast-create-intro-kind-static {
  padding: var(--cast-editor-space-xs) 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cast-sub);
}

/* ナレーション⇄セリフの切り替え。押せることが分かるよう枠付きのピルにする。 */
#cast-create-view .cast-create-intro-kind-btn {
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 999px;
  background: var(--cast-bg);
  color: var(--cast-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#cast-create-view .cast-create-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cast-sub);
  font-size: 14px;
  cursor: pointer;
}

#cast-create-view .cast-create-move-btn:disabled {
  opacity: .3;
  cursor: default;
}

/* 削除は赤文字の「削除」をやめ、控えめな✕アイコンに（各行に赤字が並ぶと画面が騒がしく、
   誤タップも誘発する）。押したときだけ赤くする。 */
#cast-create-view .cast-create-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cast-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

#cast-create-view .cast-create-remove-btn:active {
  color: var(--danger);
}

#cast-create-view .cast-create-intro-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cast-editor-space-sm);
  margin-top: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-intro-item-footer .cast-create-counter {
  margin-top: 0;
}

#cast-create-view .cast-create-insert-user-btn {
  flex-shrink: 0;
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-sm);
  border: 1px solid var(--cast-hairline);
  border-radius: 999px;
  background: var(--cast-bg);
  color: var(--cast-sub);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* おすすめペルソナのカード（2026-07-29）。口調サンプルの枠を流用していたのをやめ、
   この機能固有の二層構造（遊ぶ人に見えるもの / キャストに伝わるもの）を
   hairline の分割と層見出しで表す。警告文で守るのではなく構造で分からせる。 */
#cast-create-view .cast-persona-card {
  padding: var(--cast-editor-space-md);
  margin-bottom: var(--cast-editor-space-md);
  border: 1px solid var(--cast-hairline);
  border-radius: 10px;
}

#cast-create-view .cast-persona-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cast-editor-space-sm);
}

#cast-create-view .cast-persona-card-index {
  font-size: 12px;
  font-weight: 700;
  color: var(--cast-faint);
}

/* 層の見出し。フォームのラベルより弱く、でも「境目」として読める強さ。 */
#cast-create-view .cast-persona-card-layer {
  margin: 0 0 var(--cast-editor-space-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cast-faint);
}

#cast-create-view .cast-persona-card-layer-divided {
  margin-top: var(--cast-editor-space-md);
  padding-top: var(--cast-editor-space-md);
  border-top: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-persona-card-identity {
  display: flex;
  align-items: flex-start;
  gap: var(--cast-editor-space-md);
}

#cast-create-view .cast-persona-card-identity-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-sm);
}

/* 上限が20字/50字と短いので、他のフォーム同様カウンターを出す。
   無いと maxlength に当たったとき無言で入力が止まる。 */
#cast-create-view .cast-persona-card-field {
  display: flex;
  flex-direction: column;
}


/* 紹介文は名前より一段弱い。一覧では説明として読まれるもので、見出しではないため。 */
#cast-create-view .cast-persona-card-tagline {
  font-size: 13px;
}

#cast-create-view .cast-create-input:disabled {
  opacity: .5;
}

#cast-create-view .cast-create-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cast-editor-space-sm);
  width: 100%;
  padding: var(--cast-editor-space-md);
  border: 1px dashed var(--cast-hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--cast-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#cast-create-view .cast-create-add-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* 追加ギャラリー画像（最大10枚）のタイルグリッド。cast-create-preview-media系と同じ
   hairline枠・dashed空状態のトーンを4列グリッドに揃える。 */
#cast-create-view .cast-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cast-hairline);
  border: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-gallery-tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-create-view .cast-gallery-tile-remove {
  position: absolute;
  top: var(--cast-editor-space-xs);
  right: var(--cast-editor-space-xs);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

/* 画像ぼかしトグル（2026-07-24）。削除✕バッジ（top-right）と対称のbottom-leftに置く。
   ONのときは背景をアクセント色にして、グリッド全体を一目で見渡せるようにする。 */
#cast-create-view .cast-gallery-tile-blur-toggle {
  position: absolute;
  bottom: var(--cast-editor-space-xs);
  left: var(--cast-editor-space-xs);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

#cast-create-view .cast-gallery-tile-blur-toggle.is-active {
  background: var(--accent);
  color: #fff;
}

#cast-create-view .cast-gallery-tile-add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--cast-faint);
  background: transparent;
  cursor: pointer;
}

#cast-create-view .cast-gallery-tile-add-plus {
  font-size: 22px;
  font-weight: 300;
  color: var(--cast-faint);
}

/* A. ライブプレビューカード。/cast ギャラリーカード（#cast-home-view
   .cast-character-card 系、styles.css ~11012行）と同じ数値（radius 12・hairline枠・
   3/4カバー・名前15px/600・タグラインsub 2行clamp・フックink 2行clamp・タグfaint）を
   新規クラス名で再現する。ギャラリーカードと違い全体はボタンではなく、カバー領域だけが
   タップ領域（data-action="cast-create-pick-cover"）。 */
#cast-create-view .cast-create-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 20px;
}

#cast-create-view .cast-create-preview-card {
  width: 200px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cast-bg);
}

#cast-create-view .cast-create-preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--cast-hairline);
  overflow: hidden;
  cursor: pointer;
}

#cast-create-view .cast-create-preview-media-dashed {
  outline: 1px dashed var(--cast-faint);
  outline-offset: -1px;
}

#cast-create-view .cast-create-preview-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-create-view .cast-create-preview-change-pill {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cast-chip-bg);
  color: #ffffff;
}

#cast-create-view .cast-create-preview-media-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: var(--cast-faint);
  font-size: 12px;
}

#cast-create-view .cast-create-preview-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
}

#cast-create-view .cast-create-preview-overlay {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  background: var(--cast-bg);
}

#cast-create-view .cast-create-preview-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--cast-ink);
}

#cast-create-view .cast-create-preview-name-empty {
  color: var(--cast-faint);
}

#cast-create-view .cast-create-preview-tagline {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--cast-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#cast-create-view .cast-create-preview-hook {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cast-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#cast-create-view .cast-create-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: 6px;
}

#cast-create-view .cast-create-preview-tag {
  font-size: 12px;
  line-height: 16px;
  color: var(--cast-faint);
}

#cast-create-view .cast-create-preview-caption {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

/* B. アバター行。72pxの円形プレビュー自体がタップ領域（data-action="cast-create-pick-avatar"）。
   セクション見出し・説明文はフォームchromeなので --cast-* ではなく既存の --text-secondary 系。 */
#cast-create-view .cast-create-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* チャット背景は任意項目なのにカバー用の全幅3:4スタイルを流用していて、カバー本体より
   大きく出ていた（専用ルールが無かった）。行内サムネイルに収める。 */
#cast-create-view .cast-create-avatar-row .cast-create-background-media {
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
}
#cast-create-view .cast-create-avatar-row .cast-create-background-media .cast-create-preview-change-pill {
  font-size: 10px;
  padding: 2px 8px;
}

#cast-create-view .cast-create-avatar-circle {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

/* 画像ピッカーはペルソナシートのおすすめ行と同寸（48px）にして、同じものだと分かるようにする。
   .cast-create-avatar-circle（72px）の後に置いて後勝ちで上書きする。 */
#cast-create-view .cast-persona-card-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

#cast-create-view .cast-create-avatar-circle-dashed {
  outline: 1px dashed var(--border);
  outline-offset: -1px;
}

#cast-create-view .cast-create-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-create-view .cast-create-avatar-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cast-chip-bg);
  color: #ffffff;
}

#cast-create-view .cast-create-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
}

#cast-create-view .cast-create-avatar-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

#cast-create-view .cast-create-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#cast-create-view .cast-create-tag-item .cast-create-input {
  flex: 1;
}

#cast-create-view .cast-partner-settings {
  margin: 0 0 var(--cast-editor-space-lg);
  padding: var(--cast-editor-space-md);
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 14px;
  background: var(--cast-editor-card-surface);
}
#cast-create-view .cast-partner-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cast-editor-space-sm);
}
#cast-create-view .cast-partner-settings-head .cast-editor-section-title {
  margin: 0;
}
#cast-create-view .cast-partner-settings-fields {
  display: grid;
  gap: var(--cast-editor-space-sm);
}
#cast-create-view .cast-partner-settings-field {
  min-width: 0;
  border-bottom: 1px solid var(--cast-editor-card-border);
}
#cast-create-view .cast-partner-settings-field > summary {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) 14px;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
#cast-create-view .cast-partner-settings-field > summary::-webkit-details-marker { display: none; }
#cast-create-view .cast-partner-settings-field > summary::marker { content: ""; }
#cast-create-view .cast-partner-settings-field[open] > summary {
  grid-template-columns: minmax(110px, auto) 14px;
}
#cast-create-view .cast-partner-settings-field[open] > summary .cast-partner-settings-preview { display: none; }
#cast-create-view .cast-partner-settings-field-title {
  display: inline-flex;
  align-items: center;
  gap: var(--cast-editor-space-xs);
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
#cast-create-view .cast-partner-settings-check {
  display: inline-flex;
  color: var(--cast-editor-secondary-text);
}
#cast-create-view .cast-partner-settings-preview {
  overflow: hidden;
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cast-create-view .cast-partner-settings-preview.is-empty { color: transparent; }
#cast-create-view .cast-partner-settings-field .cast-create-option-chevron {
  color: var(--cast-editor-secondary-text);
  transition: transform .16s ease;
}
#cast-create-view .cast-partner-settings-field[open] .cast-create-option-chevron { transform: rotate(180deg); }
#cast-create-view .cast-partner-settings-field-body {
  display: grid;
  gap: var(--cast-editor-space-sm);
  padding: 0 0 var(--cast-editor-space-md);
}
#cast-create-view .cast-partner-settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cast-editor-space-xs);
}
#cast-create-view .cast-editor-btn.cast-partner-settings-chip {
  min-height: 32px;
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-sm);
  border-radius: 999px;
  font-size: 12px;
}
#cast-create-view .cast-partner-settings-chip.is-used { opacity: .48; }
#cast-create-view .cast-partner-settings-budget {
  position: relative;
  overflow: hidden;
  height: 3px;
  margin-top: var(--cast-editor-space-md);
  border-radius: 999px;
  background: var(--cast-editor-card-border);
}
#cast-create-view .cast-partner-settings-budget-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cast-editor-blue);
  transition: width .16s ease, background-color .16s ease;
}
#cast-create-view .cast-partner-settings-budget.is-near-limit .cast-partner-settings-budget-fill { background: #b7791f; }
#cast-create-view .cast-partner-settings-budget-note {
  min-height: 0;
  margin: 0;
  color: #9a6818;
  font-size: 11px;
  text-align: right;
}
#cast-create-view .cast-partner-settings-budget-note:not(.is-visible) { display: none; }
:root[data-theme="dark"] #cast-create-view .cast-partner-settings-budget-note { color: #e0ab4f; }
:root[data-theme="dark"] #cast-create-view .cast-partner-settings-budget.is-near-limit .cast-partner-settings-budget-fill { background: #e0ab4f; }

@media (prefers-reduced-motion: reduce) {
  #cast-create-view .cast-partner-settings-field .cast-create-option-chevron,
  #cast-create-view .cast-partner-settings-budget-fill { transition: none; }
}

#cast-create-view .cast-create-guide-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--cast-cta-bg, var(--accent));
  color: var(--cast-cta-text, var(--bg));
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

#cast-create-view .cast-create-guide-paste-area {
  width: 100%;
  margin-bottom: 4px;
  min-height: 200px;
}

#cast-create-view .cast-create-publish-panel {
  padding: 0;
  margin-bottom: var(--cast-editor-space-lg);
}

/* 公開状態のヒーロー。旧デザインは「現在: 公開中」の一行と黒ボタンが地の文に埋もれていた。 */
#cast-create-view .cast-create-publish-hero {
  padding: 16px;
  margin-bottom: 4px;
  border: 1px solid var(--cast-hairline);
  border-radius: 12px;
}

#cast-create-view .cast-create-publish-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cast-sub);
}

#cast-create-view .cast-create-publish-hero.is-public .cast-create-publish-state {
  color: var(--cast-ink);
}

#cast-create-view .cast-create-publish-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cast-faint);
}

#cast-create-view .cast-create-publish-hero.is-public .cast-create-publish-state::before {
  background: var(--cast-ink);
}

#cast-create-view .cast-create-publish-lead {
  margin: 6px 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cast-sub);
}

#cast-create-view .cast-create-publish-btn {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--cast-cta-bg, var(--accent));
  color: var(--cast-cta-text, var(--bg));
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* 非公開に戻すのは破壊的ではないが「進む」操作でもないので、地色を持たせない。 */
#cast-create-view .cast-create-publish-btn.is-unpublish {
  border: 1px solid var(--cast-hairline);
  background: transparent;
  color: var(--cast-ink);
}

#cast-create-view .cast-create-publish-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* 下部バー（2026-07-25: sticky をやめてシェル最下段の固定行にした。スクロール領域の
   外に出したので、中身の長短にかかわらず常に画面下端にある。バーの高さ分の余白を
   本文側に空ける .cast-create-bottom-spacer も不要になったので削除）。 */
#cast-create-view .cast-create-sticky-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-bottom: calc(10px + var(--safe-area-bottom, 0px));
  background: var(--cast-bg);
  border-top: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-create-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 下部バー左の「下書き」ボタン（2026-07-25）。ここには公開中/下書きの状態バッジが
   あったが、公開状態は「公開」タブで切り替えるものなので常駐させる意味がなかった。
   主役は右の保存ボタンなので、こちらは枠線だけの静かなボタンにする。 */
/* キャストホームの並び替え（2026-07-26 ユーザー要望）。
   タブを横に並べる形はやめた。並び順はあとから増える前提なので、増えるたびに横幅が
   破綻する作りにしない（オーナー指示「あとから追加できるような作り方にして」）。
   「いまの並び + ▾」の小さなボタンにして、選択肢はシート側に逃がす。 */
.cast-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
}

/* 見出しは既存の .cast-section-title と同じ見た目のまま、行の余白だけ殺して
   並び替えボタンと同じ行に収める（上下に積むと1画面のキャスト数が減るため）。 */
.cast-section-title-inline {
  margin: 0;
}

.cast-order-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cast-hairline);
  border-radius: 999px;
  background: transparent;
  /* cast画面のインク色は --cast-ink（ダークで #e7e9ea に切り替わる）。
     シートは cast ビューの外に描かれることがあるので、その場合は本体の --text に落とす。 */
  color: var(--cast-ink, var(--text));
  font-size: 13px;
  font-weight: 700;
}

.cast-order-select > i:first-child {
  font-size: 12px;
  opacity: 0.75;
}

.cast-order-select-caret {
  font-size: 10px;
  opacity: 0.55;
}

.cast-order-select:active {
  background: var(--cast-hairline);
}

/* 選択中の行。チェックだけで示し、色や太さで序列を作らない。 */
.cast-order-item-current .repost-picker-action-copy strong {
  color: var(--cast-ink, var(--text));
}

.cast-order-item-check {
  margin-left: auto;
  padding-left: 12px;
  font-size: 13px;
  opacity: 0.8;
}

/* 編集をやめるときの確認シート（2026-07-26）。土台は既存のアクションシートを流用し、
   説明文だけ足す。専用の見た目を作らないのは、この画面だけ作法が違うと迷うため。 */
.cast-leave-guard-lead {
  margin: 0 0 12px;
  padding: 0 4px;
  /* このシートは body 直下（.repost-picker-section）に描かれるため --cast-sub の
     スコープ外で、var(--cast-sub, #536471) だとダークでもライト値に固定され
     コントラスト 3.43:1 まで落ちていた（2026-08-17 デスクトップ整合性チェックで検出）。
     同じシート内の .action-sheet-action-sub と同じテーマ対応トークンに揃える。 */
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

#cast-create-view .cast-create-drafts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cast-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--cast-sub);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

#cast-create-view .cast-create-drafts-btn i {
  font-size: 13px;
}

#cast-create-view .cast-create-drafts-btn:active {
  background: var(--cast-hairline);
}

/* 他に残っている下書きの件数。数字は控えめに、ただし「ある」ことは分かるように。 */
#cast-create-view .cast-create-drafts-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cast-ink);
  color: var(--cast-bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ---- 下書き一覧シート（2026-07-25） ----
   ボトムシートの土台はリポストピッカーと共通。中身だけを専用に組む。
   #cast-create-view の外（シート側）に出るので --cast-* は使えず、対応する
   共通トークン（--text=ink / --border=hairline / --text-soft=faint）を使う。 */
.cast-drafts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.cast-drafts-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.cast-drafts-body {
  padding: 4px 16px 16px;
}

/* いま開いている下書きの状態行。復元対象ではないので、押せる見た目にしない。 */
.cast-drafts-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.cast-drafts-current-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text);
}

.cast-drafts-current-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cast-drafts-current-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cast-drafts-current-meta {
  font-size: 12px;
  color: var(--text-soft);
}

.cast-drafts-section-title {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
}

.cast-drafts-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-drafts-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}

.cast-drafts-row:last-child {
  border-bottom: 0;
}

.cast-drafts-restore {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.cast-drafts-face {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-secondary);
}

.cast-drafts-face-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」で頭文字1字から変更）。親の44px角丸カードいっぱいに
   #cfd9deを敷き、中身は.avatar-icon（DEFAULT_AVATAR_SVG）に揃える。 */
.cast-drafts-face-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #cfd9de;
}

.cast-drafts-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 3行とも1行に丸める。下書きの本文は改行だらけなので、はみ出すと行間が崩れる。 */
.cast-drafts-name,
.cast-drafts-snippet,
.cast-drafts-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-drafts-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.cast-drafts-snippet {
  font-size: 13px;
  color: var(--text-secondary);
}

.cast-drafts-meta {
  font-size: 12px;
  color: var(--text-soft);
}

.cast-drafts-delete {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 15px;
}

.cast-drafts-delete:active {
  background: var(--bg-secondary);
}

.cast-drafts-empty {
  padding: var(--s4) 0 var(--s2);
  text-align: center;
}

/* 編集中は「ほかの下書きなし」が普通の状態なので、空表示を強く見せない。 */
.cast-drafts-empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cast-drafts-empty-desc {
  margin: var(--s2) 0 0;
  font-size: var(--type-support-size);
  line-height: var(--type-line-height);
  color: var(--text-soft);
}

.cast-drafts-note {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}

/* 削除済みキャストの過去トーク閲覧（2026-08-10）: 確認シート本文。 */
.cast-removed-talk-prompt-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

#cast-create-view .cast-create-save-btn {
  position: relative;
  height: 40px;
  padding: 0 var(--cast-editor-space-lg);
  border: 0;
  border-radius: 8px;
  background: var(--cast-cta-bg, var(--accent));
  color: var(--cast-cta-text, var(--bg));
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* 未保存の変更があることを、文言を増やさずに点で示す。 */
#cast-create-view .cast-create-save-btn.is-dirty::after {
  content: "";
  position: absolute;
  top: var(--cast-editor-space-xs);
  right: var(--cast-editor-space-xs);
  width: var(--cast-editor-space-xs);
  height: var(--cast-editor-space-xs);
  border-radius: 50%;
  background: currentColor;
}

#cast-create-view .cast-create-save-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* 「戻る」は前ステップへ戻るだけの副操作なので、アイコン1つに絞って場所を空ける
   （空いた分を保存/次へに回す）。 */
#cast-create-view .cast-summon-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cast-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--cast-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#cast-create-view .cast-summon-back-btn:disabled {
  opacity: .3;
  cursor: default;
}

/* ラクラク召喚の結果画面の「編集する」は同じクラスを流用した文字ボタンなので、
   アイコン用の固定幅を解除する。 */
#cast-create-view .cast-summon-back-btn.cast-summon-result-secondary {
  width: auto;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}

#cast-create-view .cast-summon-nav-bar .cast-summon-next-btn {
  margin-left: auto;
}

/* 保存が主役なので、「次へ」は枠だけの副ボタンにする。 */
#cast-create-view .cast-create-bar-actions .cast-summon-next-ghost {
  margin-left: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cast-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--cast-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* ラクラク召喚①: 手順カード（依頼文全文は出さない） */
/* ラクラク①の手順。3枚の塗りつぶしカードが等しく主張していたのをやめ、
   番号でつながった細い行にする（この画面で押すのはコピーボタン1つだけ）。 */
#cast-create-view .cast-summon-howto {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

#cast-create-view .cast-summon-howto-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 18px;
}

#cast-create-view .cast-summon-howto-card:last-child {
  padding-bottom: 0;
}

/* 番号どうしを縦線でつないで「順番」を見せる */
#cast-create-view .cast-summon-howto-card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--cast-hairline);
}

#cast-create-view .cast-summon-howto-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--cast-hairline);
  background: var(--cast-bg);
  color: var(--cast-sub);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#cast-create-view .cast-summon-howto-card.done .cast-summon-howto-num {
  background: var(--cast-ink);
  border-color: var(--cast-ink);
  color: var(--cast-bg);
}

#cast-create-view .cast-summon-howto-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
  min-width: 0;
}

#cast-create-view .cast-summon-howto-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--cast-ink);
}

#cast-create-view .cast-summon-howto-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
}

/* コピー完了・点灯・貼り付け検知の各状態。押すべき1ボタンが常に目立つようにする */
@keyframes castSummonPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* コピー済みは「もう押さなくていい」状態なので、地色を落として次へに主役を渡す。 */
#cast-create-view .cast-create-guide-copy-btn.cast-summon-copied {
  background: transparent;
  color: var(--cast-ink);
  border-color: var(--cast-hairline);
  animation: castSummonPulse 0.5s ease;
}

#cast-create-view .cast-summon-next-btn.cast-summon-quiet {
  background: transparent;
  color: var(--cast-sub);
  border: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-summon-next-btn.cast-summon-lit {
  animation: castSummonPulse 0.5s ease;
}

#cast-create-view .cast-summon-next-btn.cast-summon-ready {
  animation: castSummonPulse 0.5s ease;
}

/* ラクラク召喚②: 整形待ちの召喚の儀式（モノクロ線画リング＋段階メッセージ）。
   タイマー不使用・CSSアニメだけで30秒級の待ちを演出する */
/* 召喚中はscroll領域自体をflex centerにして儀式を完全中央へ（ヘッダー/バー高さに
   依存しない。padding上寄せ/min(66vh)ではやや上、calc実測値は脆いため親centerに寄せた
   — 2026-07-21 オーナー指摘）。儀式コンテンツ(~250px)はscroll領域より十分小さい。 */
#cast-create-view .cast-create-scroll-ritual {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 儀式は完全中央に置く。共通の末尾余白が入ると20px分だけ上にずれる。 */
  padding-bottom: 0;
}

/* 召喚中の儀式。旧デザインは親のflex中央寄せで横幅が縮み、メッセージが
   「設定を読み取って / います…」と2行に折れて壊れて見えていた。横幅を伸ばして
   1行に収める。 */
#cast-create-view .cast-summon-ritual {
  /* 親(.cast-create-scroll-ritual)は横並びflexで、align-items:centerが縦中央寄せを
     担っている。ここで align-self:stretch すると縦中央が外れて上に貼り付くので、
     主軸方向の幅だけを100%にする。 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 24px 16px;
}

#cast-create-view .cast-summon-ring {
  position: relative;
  width: 132px;
  height: 132px;
}

#cast-create-view .cast-summon-ring span {
  position: absolute;
  border-radius: 50%;
}

/* 破線のリングは「画像未設定のプレースホルダ」に見えてしまうので、細い実線の輪＋
   回る弧に変える（装飾ゼロのフラット方針のまま、動きだけで待ちを見せる）。 */
#cast-create-view .cast-summon-ring-outer {
  inset: 0;
  border: 1px solid var(--cast-hairline);
  animation: castSummonSpin 9s linear infinite;
}

/* 弧は1本だと、中央の点と合わさって「顔」に見える瞬間がある。上下2本の対称な弧にして
   回転体として読ませる。 */
#cast-create-view .cast-summon-ring-inner {
  inset: 14px;
  border: 2px solid var(--cast-ink);
  border-right-color: transparent;
  border-left-color: transparent;
  animation: castSummonSpinReverse 1.6s linear infinite;
}

#cast-create-view .cast-summon-ring-core {
  inset: 60px;
  background: var(--cast-ink);
  animation: castSummonCore 1.8s ease-in-out infinite;
}

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

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

@keyframes castSummonCore {
  0%, 100% { transform: scale(0.75); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}

#cast-create-view .cast-summon-stage-msgs {
  position: relative;
  width: 100%;
  height: 1.6em;
  text-align: center;
}

#cast-create-view .cast-summon-stage-msg {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cast-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cast-create-view .cast-summon-ritual-note {
  margin: -18px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--cast-sub);
  text-align: center;
}

#cast-create-view .cast-summon-stage-msg:nth-child(1) {
  animation: castStageShow 8s ease forwards;
}

#cast-create-view .cast-summon-stage-msg:nth-child(2) {
  animation: castStageShow 9s ease 7.5s forwards;
}

#cast-create-view .cast-summon-stage-msg:nth-child(3) {
  animation: castStageHold 4s ease 16s forwards;
}

/* 複数人経路（.is-long。2026-08-08、人数選択の追加で単体/複数人に分岐）専用。
   3枚目までが「書き起こしの中身」の演出。単体は従来どおりここで打ち止め（上のルール）
   だが、複数人は整形が最大125秒かかることがあるので、3枚目を送り出して
   4枚目「AIが考えています…」(24.5-64.5s)・5枚目「まだ時間がかかっています…」(64s以降・
   保持)で長い待ちを受け止める。後半2枚は進捗を装わない — サーバー側は不透明なLLM
   呼び出し1本で途中経過を持たないため、実際には進んでいない工程を進んでいるように
   見せず、経過の事実だけを出す。 */
#cast-create-view .cast-summon-stage-msgs.is-long .cast-summon-stage-msg:nth-child(3) {
  animation: castStageShow 9s ease 16s forwards;
}

#cast-create-view .cast-summon-stage-msgs.is-long .cast-summon-stage-msg:nth-child(4) {
  animation: castStageShow 40s ease 24.5s forwards;
}

#cast-create-view .cast-summon-stage-msgs.is-long .cast-summon-stage-msg:nth-child(5) {
  animation: castStageHold 4s ease 64s forwards;
}

@keyframes castStageShow {
  0% { opacity: 0; transform: translateY(6px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes castStageHold {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; }
}

/* 召喚成功オーバーレイ（body直下・一時表示） */
.cast-summon-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: castSummonOverlayIn 0.25s ease;
  transition: opacity 0.4s ease;
}

.cast-summon-success-overlay.leaving {
  opacity: 0;
  pointer-events: none;
}

@keyframes castSummonOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cast-summon-success-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 24px;
}

.cast-summon-success-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--text-secondary);
}

.cast-summon-success-name {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
  animation: castSummonNamePop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cast-summon-success-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

@keyframes castSummonNamePop {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #cast-create-view .cast-summon-ring-outer,
  #cast-create-view .cast-summon-ring-inner,
  #cast-create-view .cast-summon-ring-core,
  #cast-create-view .cast-create-guide-copy-btn.cast-summon-copied,
  #cast-create-view .cast-summon-next-btn.cast-summon-lit,
  #cast-create-view .cast-summon-next-btn.cast-summon-ready,
  .cast-summon-success-overlay,
  .cast-summon-success-name {
    animation: none;
  }

  #cast-create-view .cast-summon-stage-msg {
    animation: none;
  }

  /* 単体経路（is-longなし）: 従来どおり1枚目「設定を読み取っています…」を固定表示する。
     マークアップを1文字も変えない不変条件があるため、ここも見え方を変えない。 */
  #cast-create-view .cast-summon-stage-msgs:not(.is-long) .cast-summon-stage-msg:nth-child(1) {
    opacity: 1;
  }

  /* 複数人経路（is-long）: アニメを止める以上どれか1枚を出しっぱなしにするしかないので、
     経過時間に関係なく常に正しい文言＝4枚目「AIが考えています…」を出す。1枚目
     「設定を読み取っています…」を固定すると、100秒待っている人にも最初の工程のままだと
     誤って伝えてしまう。 */
  #cast-create-view .cast-summon-stage-msgs.is-long .cast-summon-stage-msg:nth-child(4) {
    opacity: 1;
  }
}


/* トーク一覧（/cast/talks）: zetaのトーク一覧のLINE型リストの翻訳。トークンのみ使用 */
#cast-talks-view .cast-talks-section {
  padding: 12px;
}

#cast-talks-view .cast-talks-list {
  display: flex;
  flex-direction: column;
}

#cast-talks-view .cast-talks-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* zeta比較パス3: 一覧行は区切り線なし・余白で分離（zetaのトーク一覧と同形） */
  padding: 14px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

#cast-talks-view .cast-talks-row-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cast-hairline);
}

#cast-talks-view .cast-talks-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-talks-view .cast-talks-row-body {
  flex: 1;
  min-width: 0;
}

#cast-talks-view .cast-talks-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#cast-talks-view .cast-talks-row-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--cast-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cast-talks-view .cast-talks-row-time {
  font-size: 12px;
  color: var(--cast-faint);
  flex-shrink: 0;
}

#cast-talks-view .cast-talks-row-excerpt {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--cast-sub);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 削除済みキャストの過去トーク（2026-08-10）: 以前はタップ不可の非活性行だったが、
   閲覧専用モード対応でタップ可能な通常ボタンに変わった。薄いopacityと文字色だけ残し
   「削除済み」であることは伝えつつ、cursor:defaultは外す（親のcast-talks-rowが既に
   cursor:pointerを持つ）。 */
#cast-talks-view .cast-talks-row-removed {
  opacity: 0.7;
}

#cast-talks-view .cast-talks-row-removed .cast-talks-row-name {
  color: var(--cast-sub);
}

/* 世界切替（あめはれ式、2026-07-17 オーナー決定）: SNSヘッダー右上のゼタちゃん顔ボタン。
   ヘッダーの縦幅は一切変えず、absolute配置で両世界のボタンを同一座標（上2px・右6px・44px）に
   固定する。44pxはcastヘッダー(48px)に収まるギリギリのサイズ。 */
.header-cast-switch-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.header-cast-switch-btn img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 世界切替の演出（オーナー指示「露骨な演出」）: ボタン起点の円形ワイプ＋エンブレム */
.world-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  clip-path: circle(0px at var(--ws-x) var(--ws-y));
  transition: clip-path 440ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease-out;
}

.world-switch-overlay.expand {
  clip-path: circle(150% at var(--ws-x) var(--ws-y));
}

.world-switch-overlay.reveal {
  opacity: 0;
  pointer-events: none;
}

.world-switch-emblem {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  animation: world-switch-pop 460ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.world-switch-emblem-z {
  border-radius: 0;
  object-fit: contain;
}

:root[data-theme="dark"] .world-switch-emblem-z {
  filter: invert(1);
}

.world-switch-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  animation: world-switch-pop 460ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes world-switch-pop {
  from {
    transform: scale(0.35);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===================================================================
   PC導線: サイドバー下のゼタちゃん招待（世界切替の入口）＋全画面の世界転換
   オーナー決定(2026-07-17): ナビ項目ではなくキャラ自身が入口。
   /cast系滞在中は body.cast-world-active で左サイドバー・右ZYNカラムを隠す。
   =================================================================== */

.sidebar-cast-invite {
  position: relative;
  align-self: flex-start;
  margin: auto 0 14px;
  padding: 26px 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.cast-invite-figure {
  display: block;
  width: 82px;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(15, 20, 25, 0.18));
  transform-origin: 50% 100%;
  animation: cast-invite-bob 3.4s ease-in-out infinite;
  transition: transform 0.18s ease;
}

.sidebar-cast-invite:hover .cast-invite-figure {
  transform: scale(1.06);
}

.cast-invite-bubble {
  position: absolute;
  top: 0;
  left: 54px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 2px 6px rgba(15, 20, 25, 0.08);
  opacity: 0;
  animation: cast-invite-bubble 9s ease-in-out infinite;
  pointer-events: none;
}

.cast-invite-bubble::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(-45deg);
}

@keyframes cast-invite-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* 9秒周期で「ふっと現れて消える」控えめな吹き出し */
@keyframes cast-invite-bubble {
  0%, 55%, 100% { opacity: 0; translate: 0 3px; }
  62%, 88% { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cast-invite-figure {
    animation: none;
  }
  .cast-invite-bubble {
    animation: none;
    opacity: 1;
  }
}

/* モバイルのドロワー表示ではゼタちゃん招待を出さない（入口はヘッダー右上ボタン） */
.sidebar.sidebar-overlay-open .sidebar-cast-invite {
  display: none;
}

/* /cast系滞在中のPC: 世界を丸ごと切り替える（サイドバー・ZYNカラム非表示）。
   Codex PR #299 P1: 残った .main が600px+左右borderのままだと「白い余白に浮く細い柱」に
   見えるため、キャスト滞在中は列を少し広げつつ境界線を消し、ページ全体が地続きの
   キャスト世界（白）に見えるようにする（コンテンツ列自体はzeta同様の中央寄せを維持）。 */
@media (min-width: 701px) {
  body.cast-world-active .sidebar,
  body.cast-world-active .rsidebar {
    display: none;
  }

  body.cast-world-active .main {
    flex: 0 1 760px;
    border-left: 0;
    border-right: 0;
  }
}

/* /admin-inquiries のPC（2026-08-30 実機報告）: 2ペインの受信箱なので、SNSの
   600px中央カラムに入れると詳細ペインが潰れる（実測: 1280/1600 のどちらでも
   詳細141〜146px・本文欄39px・添付画像13pxまで縮み、本文が1文字ずつ折り返されていた）。
   原因はレイアウト側ではなく親（.main = flex 0 1 600px）の幅。
   body.cast-world-active と同じ作法で、この画面だけ列を広げる。
   左サイドバー（ナビ）は残す——管理画面から出る導線を消さない。 */
@media (min-width: 701px) {
  body.admin-inquiries-active .rsidebar {
    display: none;
  }

  body.admin-inquiries-active .main {
    flex: 1 1 auto;
    max-width: 1180px;
  }
}

/* キャスト専用アカウントのSNS参加導線 */
body.sns-readonly #fab-compose,
body.sns-readonly #sidebar-post-btn {
  display: none !important;
}

#cast-profile-view .cast-trial-share-section {
  margin: 28px 12px 24px;
  padding: 16px;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#cast-profile-view .cast-trial-share-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink, var(--text));
}

#cast-profile-view .cast-trial-share-lede {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cast-sub, var(--text-secondary));
}

#cast-profile-view .cast-trial-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* フル権限ユーザー向けのタイムライン出口（#320でヘッダーZボタン撤去後の閉じ込め防止。
   snsAccess=0のcast専用アカウントには出さない — app.js renderCastSnsReturnSectionHtml） */
#cast-profile-view .cast-sns-return-section {
  margin: 28px 12px 24px;
  display: flex;
  justify-content: center;
}

#cast-profile-view .cast-sns-return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#cast-profile-view .cast-sns-return-btn img {
  display: block;
}

:root[data-theme="dark"] #cast-profile-view .cast-sns-return-btn img {
  filter: invert(1);
}

#cast-profile-view .cast-promotion-section {
  margin: 28px 12px 24px;
  padding: 16px;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#cast-profile-view .cast-promotion-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

#cast-profile-view .cast-promotion-lede,
#cast-profile-view .cast-promotion-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* お知らせ未読ドット（マイページタブ、2026-07-19） */
.cast-bnav-item .cast-bnav-dot {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0245e;
}

/* castのお知らせ欄（マイページ先頭、2026-07-19） */
#cast-profile-view .cast-notices-section {
  margin: 4px 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#cast-profile-view .cast-notices-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

#cast-profile-view .cast-notices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#cast-profile-view .cast-notice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
  border-left: 2px solid var(--border-card);
}

#cast-profile-view .cast-notice.unread {
  border-left-color: #e0245e;
}

#cast-profile-view .cast-notice-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

#cast-profile-view .cast-notice-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  /* システム告知で複数段落を入れられるように改行を保持する（linkifyHtmlはbrを吐かない） */
  white-space: pre-line;
  /* linkifyHtmlが生成する長いURLでの横はみ出し防止 */
  overflow-wrap: anywhere;
}

#cast-profile-view .cast-notice-time {
  margin: 0;
  font-size: 11px;
  color: var(--text-soft);
}

#cast-profile-view .cast-promotion-steps {
  margin: 0;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

#cast-profile-view .cast-promotion-steps strong {
  color: var(--text);
}

#cast-profile-view .cast-promotion-status {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

#cast-profile-view .cast-promotion-message {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--bg);
  color: var(--text);
}

#cast-profile-view .cast-promotion-submit-btn {
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#cast-profile-view .cast-promotion-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ユーザーペルソナ管理（zetaスイープ 2026-07-18、/cast/profile） */
#cast-profile-view .cast-persona-section {
  margin: 28px 12px 24px;
  padding: 16px;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#cast-profile-view .cast-persona-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink, var(--text));
}

#cast-profile-view .cast-persona-lede,
#cast-profile-view .cast-persona-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cast-sub, var(--text-secondary));
}

#cast-profile-view .cast-persona-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#cast-profile-view .cast-persona-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--cast-hairline, var(--border));
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#cast-profile-view .cast-persona-row:last-child {
  border-bottom: none;
}

/* 「コピーして編集」（2026-08-16）: 行がbuttonなのでbutton入れ子ができず、
   wrapで包んで行本体・コピーbutton・鉛筆(装飾)を兄弟にする
   （chat-widget.js の cast-persona-sheet-row-wrap と同じ作り）。区切り線はwrap側へ。 */
#cast-profile-view .cast-persona-row-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cast-hairline, var(--border));
}

#cast-profile-view .cast-persona-row-wrap:last-child {
  border-bottom: none;
}

#cast-profile-view .cast-persona-row-wrap .cast-persona-row {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}

#cast-profile-view .cast-persona-row-copy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cast-faint, var(--text-soft));
  cursor: pointer;
}

#cast-profile-view .cast-persona-row-copy:disabled {
  opacity: 0.4;
  cursor: default;
}

#cast-profile-view .cast-persona-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--cast-sub, var(--text-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

/* マイペルソナの画像（2026-07-29）。丸い枠はそのまま使い、中身だけ画像にする。 */
#cast-profile-view .cast-persona-avatar-img {
  object-fit: cover;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」で線の円から変更）。中身は.avatar-icon
   （DEFAULT_AVATAR_SVG）に揃える。 */
#cast-profile-view .cast-persona-avatar-blank {
  background: #cfd9de;
}

#cast-profile-view .cast-persona-image-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

#cast-profile-view .cast-persona-image-pick {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--cast-sub, var(--text-secondary));
  cursor: pointer;
}

#cast-profile-view .cast-persona-image-pick-empty {
  border: 1px dashed var(--border);
  background: transparent;
}

#cast-profile-view .cast-persona-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 追加行の丸は塗らない（2026-07-29）。cta面は「保存」「会話を始める」級の
   主動線に温存する。ここは作成フォームの空アバターと同じ破線円に揃える。 */
#cast-profile-view .cast-persona-avatar-add {
  background: transparent;
  border: 1px dashed var(--cast-hairline, var(--border));
  color: var(--cast-sub, var(--text-secondary));
}

/* 破線円の中の線画アイコンは、文字だった頃より一回り小さく置く。 */
#cast-profile-view .cast-persona-avatar-add .icon {
  width: 16px;
  height: 16px;
}

#cast-profile-view .cast-persona-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#cast-profile-view .cast-persona-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 右端は「編集」を主張せず「進む」でよい（行全体が編集への遷移ボタンなので）。
   2026-08-16レビュー指摘: 以前はaria-hiddenのspan(装飾のみ・タップ不可)だったが、
   コピー行を挟んでbutton入れ子を避けるため行本体buttonの外に出した結果タップに
   反応しなくなっていた。実boutonに変え、行本体と同じcast-persona-edit actionを持たせる。 */
#cast-profile-view .cast-persona-row-chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--cast-faint, var(--text-soft));
  cursor: pointer;
}

#cast-profile-view .cast-persona-row-chevron:disabled {
  opacity: 0.4;
  cursor: default;
}

#cast-profile-view .cast-persona-row-pencil .icon {
  width: 15px;
  height: 15px;
}

#cast-profile-view .cast-persona-form-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cast-ink, var(--text));
}

#cast-profile-view .cast-persona-form-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--cast-faint, var(--text-soft));
}

#cast-profile-view .cast-persona-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink, var(--text));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「デフォルト」は塗りピルをやめてテキストに（情報はテキストで書けるなら包まない）。 */
#cast-profile-view .cast-persona-default-mark {
  font-size: 11px;
  font-weight: 400;
  color: var(--cast-faint, var(--text-soft));
}

#cast-profile-view .cast-persona-note {
  font-size: 12px;
  color: var(--cast-sub, var(--text-secondary));
  line-height: 1.5;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#cast-profile-view .cast-persona-row-actions {
  display: flex;
  gap: 8px;
}

#cast-profile-view .cast-persona-mini-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--cast-hairline, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--cast-sub, var(--text-secondary));
  cursor: pointer;
}

#cast-profile-view .cast-persona-mini-btn.danger {
  color: #b3261e;
}

#cast-profile-view .cast-persona-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 削除確認オーバーレイ（.cast-persona-panel-confirm-overlay, inset:0）の基準に（2026-08-16）。*/
  position: relative;
}

#cast-profile-view .cast-persona-input,
#cast-profile-view .cast-persona-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cast-hairline, var(--border));
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--cast-bg, var(--bg));
  color: var(--cast-ink, var(--text));
}

/* ペルソナ設定文の入力欄（2026-08-03 オーナーメモ「入力欄が狭い」）。
   高さは autoGrowCastPersonaTextarea() が持つ（cast-create-textarea と同じ流儀）ので
   手動リサイズは無効化し、下限だけ CSS で持つ。 */
#cast-profile-view .cast-persona-textarea {
  resize: none;
  line-height: 1.7;
  min-height: 132px;
}

/* フォーム見出し行（2026-08-16、zetaパリティ）: chat-widget.js の
   renderCastPersonaPanel と同じく、タイトル＋右端の削除（ゴミ箱）を1行にまとめる。 */
#cast-profile-view .cast-persona-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#cast-profile-view .cast-persona-form-head-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cast-ink, var(--text));
}

/* .cast-persona-panel-delete（unscoped、chat-widget側パネルと共有）はサイズ36x36を
   前提にしているが、ここはインラインフォームの見出し行なのでネガティブマージンで
   右端に寄せる。色・アイコンサイズはそのまま流用。 */
#cast-profile-view .cast-persona-form-delete {
  margin-right: -8px;
}

/* 主ボタン（追加/保存）をフル幅にして主従を明確にする（2026-08-16、zetaパリティ）。
   キャンセルは下に小さく残す。 */
#cast-profile-view .cast-persona-form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

#cast-profile-view .cast-persona-form-actions .cast-persona-mini-btn {
  align-self: center;
}

#cast-profile-view .cast-persona-submit-btn {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cast-cta-bg, var(--primary));
  color: var(--cast-cta-text, var(--bg));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#cast-profile-view .cast-persona-submit-btn:disabled,
#cast-profile-view .cast-persona-mini-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ペルソナ切替（zetaのトークプロフィール選択の翻訳、UI比較パス 2026-07-18） */
.cast-chat-persona-row {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* サイドバーを右から出す（2026-07-29 オーナー決定。zetaに合わせる）。
   右利きが片手で持ったとき、親指が届くのは右端側。開く向きとハンバーガーの位置は
   揃える（ヘッダーの ☰ も右端へ寄せる）。
   **cast限定**。ZYN本体・不具合報告チャットは従来どおり左から出す（共有ウィジェットなので
   .cast-chat-widget-root でスコープを切る）。 */
.cast-chat-widget-root .zeta-chat-sidebar {
  --sidebar-closed-transform: translateX(105%);
  inset: 0 0 0 auto;
  border-right: 0;
  border-left: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: -4px 0 24px rgba(13, 13, 13, 0.08);
  transform: translateX(105%);
}

.cast-chat-widget-root .zeta-chat-sidebar.open {
  transform: translateX(0);
}

/* サイドバー全体を1本の縦スクロールにする（2026-08-18 オーナー報告
   「この会話の設定の項目を増やしすぎたせいで、会話の削除が端末によっては見えない」）。

   起きていたこと: サイドバーは .zeta-chat-shell（overflow: hidden）の中で
   inset: 0 で高さが確定した flex 縦積みで、伸縮できるのは .zeta-chat-history-list
   （flex: 1 1 auto / min-height: 0）だけだった。「この会話の設定」は flex: 0 0 auto、
   .cast-chat-room-tools も中の .cast-row（min-height: 44px）より縮めないため、
   設定の行が増えて合計が画面の縦を超えると、履歴が0まで潰れたあとの溢れが
   そのまま shell に切り取られ、最後にある「この会話を削除」に届かなくなっていた。
   （どこにもスクロール領域が無いのが原因で、行数そのものではない）

   直し方: サイドバー自体をスクロール容器にし、履歴には下限だけを与える。
   - 収まる画面（縦830px以上。例: 390x844）では溢れないので overflow: auto は
     スクロールバーを出さず、履歴が flex-grow で伸びて設定が下端に付く従来の見た目のまま。
   - 収まらない画面では、履歴は下限まで縮んでそこから先は自分の中でスクロールし
     （従来どおり）、はみ出した設定〜削除はサイドバーごとスクロールして届く。
     このとき履歴が何本あってもサイドバー側のスクロール量は変わらない（履歴は自分の中で
     スクロールするので、25本あっても削除までの距離は3本のときと同じ）。
   .zeta-chat-history-list 側の overscroll-behavior: contain はそのまま
   （履歴の端まで来てもサイドバーへスクロールが伝播しない＝履歴の操作感を変えない）。 */
.cast-chat-widget-root .zeta-chat-sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 履歴の下限。min-height: 0（＝0まで潰れてよい）を、スレッド行おおよそ2行分に置き換える。
   下限が無いと、設定が縦を食い切ったときに履歴が0まで潰れて「最近」の下が空になり、
   スクロールしようにも中身が無い状態になる（＝オーナー要望の「最近と同じように」を満たさない）。
   .zeta-chat-thread-item は padding 10+11 ＋ タイトル14px*1.35 ＋ gap 2 ＋ 日付12px*1.35
   ≒ 58px なので、行間2px と合わせて 120px ≒ 2行。半端に切れた行を見せないための2行で、
   これ以上増やしても短い画面ではサイドバー側のスクロール量が増えるだけ。 */
.cast-chat-widget-root .zeta-chat-history-list {
  min-height: 120px;
}

/* ☰ をヘッダーの右端へ。戻る→タイトル→☰ の順にする（zetaと同じ並び）。
   DOM順は変えずに order だけで入れ替える（クリック配線に触らないため）。 */
.cast-chat-widget-root .zeta-chat-topbar [data-chat-action="open-sidebar"] {
  order: 3;
  margin-left: auto;
}

.cast-chat-widget-root .zeta-chat-topbar-who {
  order: 2;
}

.cast-chat-widget-root .zeta-chat-topbar [data-chat-action="go-back"] {
  order: 1;
}

/* ── サイドバーの統一行（2026-07-29 作り直し）────────────────────────
   オーナー指摘「横長ののっぺりしたボタンの羅列」「統一感がない」への対応。
   設定もルーム操作も同じ型: [アイコン] ラベル …… 現在値 ›
   塗りで区切らず、余白と細い線だけで領域を分ける。角丸は控えめ。 */
.cast-row-group {
  display: flex;
  flex-direction: column;
}

.cast-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;            /* タップ領域を確保する */
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.cast-row:disabled {
  opacity: 0.4;
  cursor: default;
}

.cast-row:not(:disabled):active {
  background: var(--bg-hover);
}

.cast-row-icon {
  flex-shrink: 0;
  color: var(--text-soft);     /* アイコンは一段落とす。読むのはラベルなので */
}

.cast-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 現在値。ラベルより弱く、でも読める強さ */
.cast-row-value {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 13px;
}

.cast-row-chevron {
  flex-shrink: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1;
}

/* 破壊的操作は、区切りで隔離したうえで文字色だけを変える（塗らない・囲まない） */
.cast-row-separator {
  height: 1px;
  margin: 6px 10px;
  background: var(--border);
}

.cast-row-danger,
.cast-row-danger .cast-row-icon {
  color: var(--danger);
}

/* zetaパリティ（2026-07-27）: ⋯ に隠れていたルーム操作を右ドロワーへ集約する。
   区切り線だけで領域を分け、囲みや塗りは足さない（設定群と同じ作法に揃える）。 */
.cast-chat-room-tools {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* やり直し／別案の常設バー。入力欄の上に右寄せで置く。
   非活性のときも場所を保つので、押す位置が毎回同じになる。 */
.cast-chat-actionbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 4px 6px;
}

/* SNS解放のお知らせ帯（2026-08-18 オーナー承認B案）。入力欄フォームの中・アクションバーの
   上に、閉じるまで残る細い帯として出す。寸法・色はすべて既存の部品から取っている:
     12px / var(--text-secondary)       … .cast-chat-readonly-banner
     8px 14px / 12.5px / radius 10px    … .onboarding-card-back-btn（「キャストに戻る」＝往復相手）
     border var(--border) / bg-secondary … .zeta-chat-room-notice
   色はすべてテーマトークン経由で、.cast-chat-widget-root がライト/ダークで
   --text / --border / --bg-secondary / --text-secondary を差し替えるので両方で読める。
   （--cast-ink / --cast-sub はトーク画面のスコープ外だとライト値に固定されるため使わない） */
.cast-unlock-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 下の余白は .zeta-chat-composer の grid gap:6px が持つので、ここでは左右だけ
     （.cast-chat-actionbar の padding: 0 4px 6px と同じ4pxに揃える）。 */
  margin: 0 4px;
  padding: 7px 6px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.cast-unlock-strip[hidden] {
  display: none;
}

.cast-unlock-strip-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* .ghost-button の輪郭は var(--border) で帯の地 var(--bg-secondary) と同色になり消えるため、
   輪郭は .onboarding-card-back-btn と同じ var(--text) にする（ライト=黒枠・ダーク=白枠）。 */
.cast-unlock-strip-cta {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--text);
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.cast-unlock-strip-cta:active {
  background: var(--bg-hover);
}

.cast-unlock-strip-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* 360px級の狭い端末では、文字を折らずに帯1行を保つために左右の余白と間隔だけ詰める。 */
@media (max-width: 374px) {
  .cast-unlock-strip {
    gap: 6px;
    padding-left: 10px;
  }
  .cast-unlock-strip-cta {
    padding: 7px 10px;
  }
}

.cast-chat-actionbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--cast-ink, var(--text));
  cursor: pointer;
}

.cast-chat-actionbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.cast-chat-actionbar-btn:not(:disabled):active {
  background: var(--bg-secondary);
}

.cast-chat-persona-current {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}

.cast-chat-persona-chevron {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1;
}

.cast-persona-sheet-list {
  display: flex;
  flex-direction: column;
}

/* 2026-07-29 デザイン見直し: おすすめ（作者の役どころ）と自分のペルソナを、
   塗りや囲みではなく「寸法と文量」で見せ分ける。cast全体の規範
   （塗って区別しない・唯一の強い面を増やさない）を守ったまま階層を作るため。 */
.cast-persona-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 詳細アコーディオン（2026-08-01、#21・閲覧専用）: 行を選択ボタンとトグルの
   兄弟に分けたので、区切り線は行ではなく item 単位に持たせる。 */
.cast-persona-sheet-item {
  border-bottom: 1px solid var(--border);
}

.cast-persona-sheet-item:last-child {
  border-bottom: 0;
}

.cast-persona-sheet-row-wrap {
  display: flex;
  align-items: stretch;
}

.cast-persona-sheet-row-wrap .cast-persona-sheet-row {
  flex: 1;
  min-width: 0;
}

/* 閲覧専用の詳細トグル。編集/削除等のアクションは一切ここに置かない。 */
.cast-persona-sheet-detail-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.cast-persona-sheet-detail-toggle svg {
  transition: transform 0.15s ease;
}

.cast-persona-sheet-detail-toggle.open svg {
  transform: rotate(180deg);
}

.cast-persona-sheet-detail {
  margin: 0 4px 14px 56px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-secondary);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* おすすめは一回り濃く。ここが「誰として話すか」を決める瞬間なので、
   紹介文を1行で切らず2行まで読ませる。 */
.cast-persona-sheet-row-recommended {
  padding: 14px 4px;
  align-items: flex-start;
}

.cast-persona-sheet-row-recommended .cast-persona-sheet-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.cast-persona-sheet-row-recommended .cast-persona-sheet-name {
  font-size: 15px;
  font-weight: 650;
}

.cast-persona-sheet-row-recommended .cast-persona-sheet-note {
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cast-persona-sheet-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}

/* 画像なしはSNS本体の初期アバターと同じ塗り円（2026-08-08 オーナー裁定
   「全部SNSの初期アイコンと同じに」で線の円から変更）。中身は.avatar-icon
   （DEFAULT_AVATAR_SVG）に揃える。 */
.cast-persona-sheet-avatar-blank {
  background: #cfd9de;
}

.cast-persona-sheet-avatar-img {
  object-fit: cover;
  background: var(--bg-secondary);
}

/* 群の見出し。行の名前と競らないよう、脇役の強さに落とす。
   色は --text-soft ではなく --text-secondary。ダークで #606972 だと11pxには薄すぎて
   見出しとして読めなかった（実機確認 2026-07-29）。弱さはサイズ・太さ・字間で作る。 */
.cast-persona-sheet-group {
  margin: 20px 4px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.cast-persona-sheet-group:first-child {
  margin-top: 0;
}

/* 選択中。丸を塗らずリングで示す（塗ると「唯一の強い面」が増えてしまう）。 */
.cast-persona-sheet-row.active .cast-persona-sheet-avatar {
  outline: 1.5px solid var(--text);
  outline-offset: 2px;
}

.cast-persona-sheet-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cast-persona-sheet-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cast-persona-sheet-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* マイペルソナ行は名前が長い場合に省略し、右のキャストアイコン列を押し出さない
   （おすすめ行は元々2行折返しの紹介文が主役なので対象外にする）。 */
.cast-persona-sheet-row-mine .cast-persona-sheet-name-row .cast-persona-sheet-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* マイペルソナ行・マイページのペルソナ一覧で共用: そのペルソナで送ったことのある
   キャストのアイコン列（2026-08-16 オーナー要望）。最新使用順で最大5個・6個目が
   あれば末尾に「…」。新しい装飾は発明せず、既存の初期アイコン/塗り円をそのまま
   一回り小さく（18px）使う。 */
.cast-persona-used-casts {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

.cast-persona-used-cast-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
}

.cast-persona-used-cast-icon-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cfd9de;
}

.cast-persona-used-casts-more {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 0 0 auto;
}

/* 「このトークで編集」で上書き中のおすすめ行に付ける小さな添え書き（2026-08-16）。 */
.cast-persona-sheet-name-suffix {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cast-persona-sheet-note {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-persona-sheet-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--text);
}

.cast-persona-sheet-row-recommended .cast-persona-sheet-check {
  margin-top: 14px;
}

.cast-persona-sheet-hint {
  margin: 16px 4px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

/* ==== ペルソナのライト作成（2026-07-30、fable案）====
   マイページ（#cast-profile-view）の cast-persona-add-row / cast-persona-form と
   同じレシピをシート文脈に持ち込む。丸は塗らない（cta面はここでは温存しない —
   このシートの「選ぶ」丸と同じ線画の破線円にする）。 */
.cast-persona-sheet-add-row .cast-persona-sheet-name {
  font-weight: 600;
}

/* 上限到達の表現（2026-08-16、ボード#132）: 追加行やコピーアイコンを消さずに残し、
   押せないことだけを薄さで示す。理由の文言は行の中／aria-labelに出す。 */
.cast-persona-sheet-add-row:disabled,
.cast-persona-add-row:disabled,
.cast-persona-sheet-detail-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}

.cast-persona-sheet-avatar-add {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-secondary);
}

.cast-persona-sheet-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 4px 0;
}

.cast-persona-sheet-input,
.cast-persona-sheet-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}

/* シート内のライト作成でも同じ扱いにする（2026-08-03）。高さは
   ZetaChatWidget.resizePersonaCreateNote() が持つ。 */
.cast-persona-sheet-textarea {
  resize: none;
  line-height: 1.7;
  min-height: 116px;
}

.cast-persona-sheet-form-error {
  margin: 0;
  font-size: 12px;
  color: #b3261e;
}

.cast-persona-sheet-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cast-persona-sheet-submit-btn {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cast-persona-sheet-mini-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.cast-persona-sheet-submit-btn:disabled,
.cast-persona-sheet-mini-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ==== ペルソナ専用パネル（2026-08-16、zetaパリティ・シート内蔵フォームの後継）====
   .zeta-chat-shell（position:fixed）の内部限定スタッキングコンテキストに乗る全画面パネル。
   .zeta-chat-sheet（z-index:61）より上に被さる。配色は既存トークンのみ・紫は使わない。 */
.cast-persona-panel {
  position: absolute;
  inset: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.cast-persona-panel[hidden] {
  display: none;
}

/* P1-3（監督指摘2026-08-16）: パネルはtabindex="-1"でJSからfocus()される
   （Escapeをthis.rootのkeydownリスナーに届かせるため）。フォーカスリングは不要。 */
.cast-persona-panel:focus {
  outline: none;
}

.cast-persona-panel-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* P1-5（監督指摘2026-08-16）: PC幅で全画面に間延びしないよう、.zeta-chat-sheet と
   同じ max-width: 560px（styles.css L7387付近）で中央寄せする。背景（.cast-persona-panel
   自体）は全幅のままでよい——暗幕相当の地はシートのオーバーレイと同じ考え方。 */
.cast-persona-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}

.cast-persona-panel-back,
.cast-persona-panel-delete,
.cast-persona-panel-head-spacer {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.cast-persona-panel-back,
.cast-persona-panel-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.cast-persona-panel-back svg {
  width: 20px;
  height: 20px;
}

.cast-persona-panel-delete {
  color: var(--text-secondary);
}

.cast-persona-panel-delete svg {
  width: 18px;
  height: 18px;
}

.cast-persona-panel-back:disabled,
.cast-persona-panel-delete:disabled {
  opacity: 0.5;
  cursor: default;
}

.cast-persona-panel-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.cast-persona-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}

.cast-persona-panel-avatar-row {
  display: flex;
  margin-bottom: 24px;
}

/* P1-2（監督指摘2026-08-16）: -wrap はクリップなしの外枠。丸クリップ(overflow:hidden)は
   内側の .cast-persona-panel-avatar だけに掛け、編集バッジは-wrapの直下に兄弟として置く
   ことで、円形クリップに欠けさせない。 */
.cast-persona-panel-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}

.cast-persona-panel-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cast-persona-panel-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cast-persona-panel-avatar-blank svg {
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
}

.cast-persona-panel-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.cast-persona-panel-avatar-edit svg {
  width: 14px;
  height: 14px;
}

.cast-persona-panel-field {
  margin-bottom: 20px;
}

.cast-persona-panel-field-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.cast-persona-panel-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.cast-persona-panel-field-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

.cast-persona-panel-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cast-persona-panel-toggle-row[aria-disabled="true"] {
  cursor: default;
  opacity: 0.75;
}

/* 既定ペルソナ編集中のロック状態（2026-08-16）。行ごと薄くすると理由文が読みにくいので、
   本文は通常の濃さのままスイッチだけ少し落とす。落としすぎるとON（白）がOFF（灰）に
   見えてしまうため0.8止まり。押した理由はトーストで返す。 */
.cast-persona-panel-toggle-row.is-locked {
  opacity: 1;
}

.cast-persona-panel-toggle-row.is-locked .settings-toggle {
  opacity: 0.8;
}

.cast-persona-panel-toggle-row:disabled {
  opacity: 0.55;
  cursor: default;
}

.cast-persona-panel-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cast-persona-panel-toggle-main {
  font-size: 13px;
  color: var(--text);
}

.cast-persona-panel-toggle-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

.cast-persona-panel-footer {
  /* .zeta-chat-sheet自体が560px幅で背景ごと中央寄せされる作法（styles.css L7387）に
     揃え、フッターの背景・区切り線ごと560px列に収める（帯を全幅にはしない）。
     left:0/right:0 + margin:0 autoで中央寄せする。 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

.cast-persona-panel-submit-btn {
  width: 100%;
}

.cast-persona-panel-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.36);
}

.cast-persona-panel-confirm-card {
  width: 100%;
  max-width: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 30px rgba(13, 13, 13, 0.2);
}

.cast-persona-panel-confirm-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.cast-persona-panel-confirm-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.cast-persona-panel-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cast-persona-panel-confirm-delete-btn {
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}

.cast-persona-panel-confirm-delete-btn:disabled {
  opacity: 0.55;
  cursor: default;
}


/* --- castスクショの「リンクで共有」ページ (/shot/:id) ---------------------------
   SPAの状態機械(state.activeView等)には乗らない、独立した最小ページ(app.js
   initScreenshotSharePage)。document.body を丸ごとこのページに差し替えて描く。
   OGPアンフォール用の1200x630ティザー画像とは別物 — こちらは実際にクリックした人が
   見る本体で、通常の--bg/--text等のテーマ変数をそのまま使い、閲覧者のダーク/ライト設定に
   追従してよい（ティザー画像側だけが常にライト固定の仕様）。 */
.csx-share-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.csx-share-page-loading {
  margin: auto;
  color: var(--text-secondary);
  font-size: 14px;
}
.csx-share-page-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  align-self: flex-start;
}
.csx-share-page-character {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.csx-share-page-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.csx-share-page-avatar-blank {
  background: var(--bg-secondary);
}
.csx-share-page-name {
  font-size: 16px;
  font-weight: 700;
}
.csx-share-page-image {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}
.csx-share-page-notfound {
  margin: auto;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}
.csx-share-page-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--primary, #0f1419);
  color: var(--bg, #fff);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* 推し（他人のプロフィールのボタン／自分のプロフィールの人数／推し一覧シート） */

/* Xのフォローボタンと同型の文字入りpill。未登録は塗り、推し中はoutlineで示す。 */
.profile-oshi-btn {
  box-sizing: border-box;
  min-width: 72px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.profile-oshi-btn:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}

.profile-oshi-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-oshi-btn.is-oshi {
  border-color: var(--border-card);
  background: transparent;
  color: var(--text);
}

.profile-oshi-btn.is-oshi:hover:not(:disabled) {
  border-color: var(--border-card);
  background: var(--bg-hover);
}

/* ⋯メニューの「推しから外す」の★も同じ黄色にして、同じ状態だと分かるようにする。 */
.repost-picker-action[data-action="toggle-oshi-user"] .fa-solid.fa-star {
  color: var(--oshi-star);
}

.profile-oshi-row {
  margin-top: 10px;
}

.profile-oshi-count {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}

.profile-oshi-count strong {
  color: var(--text);
  font-weight: 700;
}

.profile-oshi-count:hover {
  text-decoration: underline;
}

/* 推し一覧シート。行全体は操作にせず、本人表示と右端ボタンを分ける。 */
.oshi-sheet-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  padding-block: 6px;
}

.oshi-sheet-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.oshi-sheet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.oshi-sheet-avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cfd9de;
  color: #fff;
  overflow: hidden;
}

.oshi-sheet-entry .repost-picker-action-icon {
  width: 36px;
  height: 36px;
}

.oshi-sheet-name {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oshi-sheet-toggle-btn {
  flex: 0 0 auto;
  min-inline-size: 64px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}

.oshi-sheet-toggle-btn:hover {
  background: var(--bg-hover);
}

.oshi-sheet-toggle-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

/* 推し一覧はヘッダーを残したまま一覧部分だけをスクロールさせる。共有シートには
   適用せず、50人いても低いモバイルviewportから閉じる操作を失わないようにする。 */
.oshi-sheet-body {
  max-block-size: calc(100dvb - 112px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.action-sheet-action-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ─── タブ切り替えの横スライド ───
   「みんな」と「推し」を1本のトラック上の隣り合うページとして扱う。指の動きに
   そのまま追従させ、離した時点で行き先へ寄せる。境目を作らないため、隣のページは
   viewport 全面の器に「そのタブが最後にいたスクロール位置のまま」描いて並べる。 */
.timeline-pane {
  will-change: transform;
}

.timeline-pane--dragging {
  /* 指追従中は遷移を挟まない（1フレームごとに transform を直接当てる）。 */
  transition: none;
}

.timeline-pane--settling {
  transition: transform 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* 隣のページ。viewport に固定した窓の中に、そのタブのスクロール位置で中身を置く。
   指追従中しか存在しないので、通常の描画やレイアウトには一切影響しない。 */
.timeline-swipe-ghost {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  z-index: 1;
  will-change: transform;
}

.timeline-swipe-ghost--settling {
  transition: transform 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

.timeline-swipe-ghost-inner {
  position: absolute;
  left: 0;
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-pane--settling,
  .timeline-swipe-ghost--settling {
    transition: none;
  }
}

/* ===========================================================================
   登場人物（ストーリーキャストの複数キャラ化, 2026-08-04）
   キャスト作成フォーム（#cast-create-view）の基本タブに出る登場人物ブロック。
   既存の cast 系と同じくモノクロ基調・hairline 区切り。塗り面は既存の主動線
   （保存ボタン等）に温存し、ここでは足さない。
   =========================================================================== */

/* 性格・設定の共有予算の合算カウンタ（2026-08-04 オーナー裁定「20,000字は全キャラの合計」）。
   登場人物ブロックの直前に1つだけ置く。塗り面もバッジも作らず、hairline の1行にする
   （個々のフィールドのカウンタと同じ tabular-nums で、桁が動いても行が揺れない）。 */
#cast-create-view .cast-settings-budget {
  margin: var(--cast-editor-space-md) 0 0;
  padding: var(--cast-editor-space-sm) 0;
  border-top: 1px solid var(--cast-hairline);
  border-bottom: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-settings-budget-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cast-editor-space-md);
}

#cast-create-view .cast-settings-budget-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cast-sub);
}

#cast-create-view .cast-settings-budget-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--cast-sub);
  font-variant-numeric: tabular-nums;
}

#cast-create-view .cast-settings-budget-note {
  margin: var(--cast-editor-space-xs) 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--cast-faint);
}

/* 残りわずか・超過は色だけで示さず、必ず note の文言で理由が読めるようにしてある。 */
#cast-create-view .cast-settings-budget.is-near-limit .cast-settings-budget-value,
#cast-create-view .cast-settings-budget.is-over .cast-settings-budget-value,
#cast-create-view .cast-settings-budget.is-over .cast-settings-budget-note {
  color: var(--danger);
}

#cast-create-view .cast-member {
  margin: var(--cast-editor-space-md) 0 var(--cast-editor-space-xs);
  padding-top: var(--cast-editor-space-md);
  border-top: 1px solid var(--cast-hairline);
}

#cast-create-view .cast-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-member-no {
  font-size: 12px;
  font-weight: 700;
  color: var(--cast-sub);
}

#cast-create-view .cast-member-top {
  display: flex;
  align-items: flex-start;
  gap: var(--cast-editor-space-md);
}

#cast-create-view .cast-member-name-wrap {
  flex: 1;
  min-width: 0;
}

/* 1人目＝キャスト本体。「このキャスト本人」の但し書きだけを右肩に添える。 */
#cast-create-view .cast-member-role {
  font-size: 12px;
  color: var(--cast-sub);
}

/* 1人目のアイコンは既存のアバター丸（72px）をそのまま使う。名前ラベルの分だけ
   下げて、2人目以降（.cast-persona-image-pick）と同じ高さで並ぶようにする。 */
#cast-create-view .cast-member-main .cast-create-avatar-circle {
  margin-top: var(--cast-editor-space-lg);
}

/* アイコン選択（ペルソナ画像と同じ見た目。あちらは #cast-profile-view スコープなので
   このビュー用に同じ形を置く）。 */
#cast-create-view .cast-persona-image-pick {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-top: var(--cast-editor-space-lg);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--cast-sub);
  cursor: pointer;
}

#cast-create-view .cast-persona-image-pick-empty {
  border: 1px dashed var(--cast-hairline);
  background: transparent;
}

#cast-create-view .cast-persona-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-create-view .cast-persona-mini-btn {
  font-size: 12px;
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-md);
  margin-top: var(--cast-editor-space-sm);
  border: 1px solid var(--cast-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--cast-sub);
  cursor: pointer;
}

/* 取り込みピッカー（登場人物 ← 自分のキャスト、2026-08-04）。
   中身のボタン・行は共演枠と同じ既存クラス（.cast-create-intro-kind-btn /
   .cast-create-costar-picker / .cast-create-mode-option）をそのまま使うので、
   ここに要るのは差し込み位置の余白と見出し行だけ。 */
#cast-create-view .cast-member-import {
  margin-top: var(--cast-editor-space-md);
}

#cast-create-view .cast-member-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cast-editor-space-sm);
  margin-bottom: var(--cast-editor-space-sm);
}

#cast-create-view .cast-member-import-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--cast-sub);
}

/* Cast editor shared component contract
   The editor skin intentionally uses semantic component tokens so the same layout remains
   legible in the production dark theme and in the light fallback. */
#cast-create-view {
  width: min(100%, 430px);
  margin-inline: auto;
  color: var(--text);
  background: var(--bg);
}
:root {
  --cast-editor-blue: #2878f0;
  --cast-editor-secondary-surface: #f4f7fb;
  --cast-editor-secondary-text: #435166;
  --cast-editor-primary-surface: #2878f0;
  --cast-editor-primary-text: #ffffff;
  --cast-editor-disabled-surface: #d9e0ea;
  --cast-editor-disabled-text: #7a8595;
  --cast-editor-card-surface: #ffffff;
  --cast-editor-card-border: #dce4ee;
  /* Cast editor spacing scale: 8px × φ, rounded to a compact UI rhythm. */
  --cast-editor-space-xs: 5px;
  --cast-editor-space-sm: 8px;
  --cast-editor-space-md: 13px;
  --cast-editor-space-lg: 21px;
  --cast-editor-space-xl: 34px;
  --cast-editor-space-2xl: 55px;
}
:root[data-theme="dark"] {
  --cast-editor-secondary-surface: #202a38;
  --cast-editor-secondary-text: #d6e2f2;
  --cast-editor-primary-surface: #357edb;
  --cast-editor-primary-text: #ffffff;
  --cast-editor-disabled-surface: #394554;
  --cast-editor-disabled-text: #9aa7b8;
  --cast-editor-card-surface: #151d29;
  --cast-editor-card-border: #33445a;
}

:root[data-theme="dark"] :is(#cast-mine-view, #cast-profile-view, #cast-talks-view, #cast-create-view, .cast-lorebook-screen) {
  --bg: #050506;
  --bg-hover: #111113;
  --bg-secondary: #111113;
  --bg-overlay: rgba(5, 5, 6, 0.85);
  --border: rgba(255, 255, 255, 0.07);
  --border-card: rgba(255, 255, 255, 0.07);
  --text: #f2f3f5;
  --text-secondary: rgba(242, 243, 245, 0.64);
  --text-soft: rgba(242, 243, 245, 0.42);
  --primary: #3d8bff;
  --primary-hover: #2f6fff;
  --primary-soft: rgba(61, 139, 255, 0.14);
  --accent: #3d8bff;
  --accent-soft: rgba(61, 139, 255, 0.14);
}

:root[data-theme="dark"] :is(#cast-create-view, .cast-lorebook-screen) {
  --cast-editor-blue: #3d8bff;
  --cast-editor-secondary-surface: #1a1a1d;
  --cast-editor-secondary-text: rgba(242, 243, 245, 0.64);
  --cast-editor-primary-surface: #3d8bff;
  --cast-editor-primary-text: #f2f3f5;
  --cast-editor-disabled-surface: #1a1a1d;
  --cast-editor-disabled-text: rgba(242, 243, 245, 0.42);
  --cast-editor-card-surface: #111113;
  --cast-editor-card-border: rgba(255, 255, 255, 0.07);
}

:root[data-theme="dark"] :is(#cast-home-view, #cast-search-view, #cast-mine-view, #cast-profile-view, #cast-talks-view) .empty-state {
  color: var(--cast-sub);
}
#cast-create-view .cast-editor-header,
#cast-create-view .cast-create-author-shell {
  background: var(--bg);
}
#cast-create-view > .cast-editor-shell,
#cast-create-view > .cast-create-easy-review-shell,
#cast-create-view > .cast-create-author-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
#cast-create-view .cast-create-author-topline,
#cast-create-view .cast-create-journey-header {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-md);
  min-height: 58px;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  border-bottom: 1px solid var(--cast-editor-card-border);
}
#cast-create-view .cast-create-author-heading {
  min-width: 0;
  flex: 1;
}
#cast-create-view .cast-create-author-heading h1,
#cast-create-view .cast-create-journey-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
#cast-create-view .cast-create-author-actions,
#cast-create-view .cast-create-journey-actions,
#cast-create-view .cast-editor-bottom-actions,
#cast-create-view .cast-editor-journey-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cast-editor-space-sm);
}
#cast-create-view .cast-header-back,
#cast-create-view .cast-create-author-close,
#cast-create-view .cast-editor-header .cast-create-author-close {
  inline-size: 34px;
  block-size: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
#cast-create-view .cast-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 12px;
  background: var(--cast-editor-secondary-surface);
  color: var(--cast-editor-secondary-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#cast-create-view .cast-editor-btn.cast-editor-btn-outline {
  background: transparent;
}
#cast-create-view .cast-editor-chip {
  border-color: transparent;
  background: transparent;
}
#cast-create-view .cast-editor-toggle {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
}
#cast-create-view .cast-editor-btn.cast-editor-btn-primary,
#cast-create-view .cast-editor-btn.cast-editor-btn-accent {
  background: var(--cast-editor-primary-surface);
  color: var(--cast-editor-primary-text);
  border-color: var(--cast-editor-primary-surface);
}
#cast-create-view .cast-editor-btn.cast-editor-btn-fill {
  inline-size: 100%;
}
#cast-create-view .cast-editor-btn.cast-editor-btn-plain {
  border: 0;
  background: transparent;
}
#cast-create-view .cast-editor-btn.cast-editor-btn-icon {
  inline-size: 34px;
  padding: 0;
}
#cast-create-view .cast-editor-btn:not(.cast-editor-btn-icon):disabled {
  background: var(--cast-editor-disabled-surface);
  color: var(--cast-editor-disabled-text);
  opacity: 1;
  cursor: not-allowed;
}
#cast-create-view .cast-create-author-button.cast-editor-btn-accent:not(:disabled) {
  background: var(--cast-editor-primary-surface);
  color: var(--cast-editor-primary-text);
}
#cast-create-view .cast-create-complete-button {
  position: relative;
}
#cast-create-view .cast-create-save-btn.is-dirty::after,
#cast-create-view .cast-create-complete-button.is-dirty::after {
  content: "";
  position: absolute;
  top: var(--cast-editor-space-xs);
  right: var(--cast-editor-space-xs);
  width: var(--cast-editor-space-xs);
  height: var(--cast-editor-space-xs);
  border-radius: 50%;
  background: #2878f0;
}
#cast-create-view .cast-create-author-tabs {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-sm) 0;
  border-bottom: 1px solid var(--cast-editor-card-border);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cast-editor-blue) 45%, transparent) transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
#cast-create-view .cast-create-author-tabs::-webkit-scrollbar {
  height: 3px;
}
#cast-create-view .cast-create-author-tabs::-webkit-scrollbar-track {
  background: transparent;
}
#cast-create-view .cast-create-author-tabs::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: color-mix(in srgb, var(--cast-editor-blue) 45%, transparent);
}
#cast-create-view .cast-create-author-shell .cast-summon-chip {
  position: relative;
  min-width: 0;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-xs) var(--cast-editor-space-md);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-editor-secondary-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#cast-create-view .cast-create-author-shell .cast-summon-chip.active {
  /* 選択状態は下線だけで示し、タブ内の印を増やさない。 */
  color: var(--cast-editor-secondary-text);
}
#cast-create-view .cast-create-author-shell .cast-summon-chip.active::after {
  content: "";
  position: absolute;
  inset-inline: var(--cast-editor-space-sm);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cast-editor-blue);
}
#cast-create-view .cast-create-required-mark {
  margin-left: var(--cast-editor-space-xs);
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-create-tab-alert {
  display: inline-flex;
  min-width: 15px;
  min-height: 15px;
  align-items: center;
  justify-content: center;
  margin-left: var(--cast-editor-space-xs);
  border-radius: 50%;
  color: var(--cast-editor-blue);
  font-size: 11px;
}
#cast-create-view .cast-create-scroll {
  padding: var(--cast-editor-space-lg) var(--cast-editor-space-md) var(--cast-editor-space-xl);
}
#cast-create-view .cast-editor-panel,
#cast-create-view .cast-create-section-card,
#cast-create-view .cast-editor-card {
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
}
#cast-create-view .cast-editor-panel > .cast-create-section-head,
#cast-create-view .cast-editor-panel > .cast-create-field,
#cast-create-view .cast-editor-panel > .cast-character-roster,
#cast-create-view .cast-editor-panel > .cast-create-section-card,
#cast-create-view .cast-editor-panel > .cast-editor-card {
  margin-bottom: var(--cast-editor-space-lg);
}
#cast-create-view .cast-editor-section-title {
  border-left: 4px solid var(--cast-editor-blue);
  padding-left: var(--cast-editor-space-sm);
}
#cast-create-view .cast-editor-field {
  border-color: var(--cast-editor-card-border);
  background: var(--cast-editor-card-surface);
  color: var(--text);
}
#cast-create-view .cast-editor-field:focus {
  border-color: var(--cast-editor-blue);
  outline: 2px solid color-mix(in srgb, var(--cast-editor-blue) 25%, transparent);
}
#cast-create-view .cast-editor-note {
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
}
#cast-create-view .cast-editor-error {
  display: block;
  margin-top: var(--cast-editor-space-xs);
  color: #c64a5a;
  font-size: 12px;
}
#cast-create-view .cast-create-field.is-invalid .cast-editor-field {
  border-color: var(--cast-editor-blue);
}
#cast-create-view .cast-create-required {
  padding: 0;
  background: transparent;
  color: var(--cast-editor-blue);
  letter-spacing: normal;
}
#cast-create-view .cast-create-option > summary.cast-editor-btn,
#cast-create-view .cast-create-help-summary.cast-editor-btn {
  background: var(--cast-editor-secondary-surface);
}
#cast-create-view .cast-create-control {
  position: relative;
}
#cast-create-view .cast-create-control > .cast-create-counter {
  position: absolute;
  right: var(--cast-editor-space-sm);
  bottom: var(--cast-editor-space-sm);
}
#cast-create-view .cast-character-roster {
  display: grid;
  gap: var(--cast-editor-space-sm);
}
#cast-create-view .cast-character-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
  font-weight: 700;
}
#cast-create-view .cast-character-roster-track {
  display: flex;
  gap: var(--cast-editor-space-sm);
  overflow-x: auto;
  margin: 0;
  padding: 0 0 var(--cast-editor-space-xs);
  list-style: none;
}
#cast-create-view .cast-character-roster-item {
  flex: 0 0 92px;
}
#cast-create-view .cast-character-card {
  display: grid;
  width: 100%;
  min-height: 86px;
  gap: var(--cast-editor-space-xs);
  padding: var(--cast-editor-space-sm);
  text-align: left;
}
#cast-create-view .cast-character-card-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cast-editor-secondary-surface);
}
#cast-create-view .cast-character-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#cast-create-view .cast-character-card-name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cast-create-view .cast-character-card-state {
  color: var(--cast-editor-secondary-text);
  font-size: 10px;
}
#cast-create-view .cast-character-secondary-editors {
  display: none;
}
#cast-create-view .cast-editor-segment {
  min-height: 46px;
}
#cast-create-view .cast-editor-segment.is-selected {
  border-color: var(--cast-editor-blue);
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-create-avatar-surface {
  position: relative;
  display: grid;
  width: 146px;
  height: 146px;
  place-items: center;
  overflow: visible;
  border: 2px dashed var(--cast-editor-blue);
  border-radius: 20px;
  background: var(--cast-editor-secondary-surface);
  color: var(--cast-editor-blue);
  cursor: pointer;
}
#cast-create-view .cast-create-author-shell .cast-create-avatar-surface {
  width: 146px;
  height: 146px;
  border: 2px dashed var(--cast-editor-blue);
  border-radius: 20px;
}
#cast-create-view .cast-create-avatar-surface > :is(img, .cast-create-avatar-overlay) {
  clip-path: inset(0 round 18px);
}
#cast-create-view .cast-create-avatar-surface .cast-create-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#cast-create-view .cast-create-image-alert {
  position: absolute;
  top: var(--cast-editor-space-sm);
  right: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-xs);
  border-radius: 6px;
  background: var(--cast-editor-primary-surface);
  color: var(--cast-editor-primary-text);
  font-size: 10px;
  line-height: 1.15;
}
.repost-picker-body.cast-editor-sheet,
#cast-create-view .cast-editor-sheet,
.cast-editor-overlay:not(.cast-summon-success-overlay) {
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
  color: var(--text);
}
.cast-editor-sheet .cast-editor-card,
.cast-editor-overlay .cast-editor-card {
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
  color: var(--text);
}
.cast-editor-sheet .repost-picker-action,
.cast-drafts-row {
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
}
.cast-editor-overlay .cast-summon-success-inner {
  min-inline-size: min(88vw, 390px);
  padding: var(--cast-editor-space-xl) var(--cast-editor-space-lg);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
  color: var(--text);
}
#cast-create-view .cast-editor-empty {
  padding: var(--cast-editor-space-lg);
  color: var(--cast-editor-secondary-text);
  text-align: center;
}
#cast-create-view .cast-create-author-details,
#cast-create-view .cast-create-journey-menu {
  position: relative;
  flex: 0 0 auto;
}

/* v2モックのヘッダー寸法。タイトルと操作群を別のflex領域に分け、狭い端末でも
   タイトルが×やボタンの下へ潜り込まないようにする。 */
#cast-create-view .cast-create-author-topline,
#cast-create-view .cast-create-journey-header {
  min-height: 62px;
  justify-content: space-between;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md) var(--cast-editor-space-sm);
  border-bottom: 0;
}

#cast-create-view .cast-create-journey-leading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--cast-editor-space-xs);
}

#cast-create-view .cast-create-journey-leading .cast-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#cast-create-view .cast-create-journey-leading .cast-icon {
  display: block;
}

#cast-create-view .cast-create-journey-header h1 {
  flex: 1 1 auto;
}

#cast-create-view .cast-create-author-title-wrap {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-author-heading {
  min-width: 0;
  flex: 1 1 auto;
}

#cast-create-view .cast-create-author-heading h1,
#cast-create-view .cast-create-journey-header h1 {
  overflow: hidden;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cast-create-view .cast-create-author-actions,
#cast-create-view .cast-create-journey-actions {
  flex: 0 0 auto;
  gap: var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-journey-header .cast-editor-btn-fill {
  inline-size: auto;
  white-space: nowrap;
}

#cast-create-view .cast-create-author-button {
  min-height: 36px;
  padding: 0 var(--cast-editor-space-md);
  border: 1px solid color-mix(in srgb, var(--text) 72%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#cast-create-view .cast-create-author-button.cast-editor-btn-accent:not(:disabled),
#cast-create-view .cast-create-complete-button:not(:disabled) {
  border-color: var(--cast-editor-blue);
  background: transparent;
  color: var(--cast-editor-blue);
}

#cast-create-view .cast-header-back,
#cast-create-view .cast-create-author-details > summary,
#cast-create-view .cast-create-journey-menu > summary {
  display: grid;
  width: 34px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  place-items: center;
}

#cast-create-view .cast-create-author-details > summary,
#cast-create-view .cast-create-journey-menu > summary {
  width: 30px;
  font-size: 20px;
  list-style: none;
  transform: translateY(-2px);
}

#cast-create-view .cast-create-author-details > summary::-webkit-details-marker,
#cast-create-view .cast-create-journey-menu > summary::-webkit-details-marker {
  display: none;
}

#cast-create-view .cast-create-author-popover {
  position: absolute;
  top: calc(100% + var(--cast-editor-space-xs));
  right: 0;
  z-index: 30;
  min-width: 148px;
  padding: var(--cast-editor-space-sm);
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 12px;
  background: var(--cast-editor-card-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

#cast-create-view .cast-create-author-popover > button {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--cast-editor-space-md);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

#cast-create-view .cast-create-author-popover > span {
  display: block;
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md) var(--cast-editor-space-xs);
  color: var(--cast-editor-secondary-text);
  font-size: 11px;
  line-height: 1.5;
}

#cast-create-view .cast-create-author-shell .cast-create-author-tabs {
  min-height: 47px;
  gap: var(--cast-editor-space-lg);
  padding: 0 var(--cast-editor-space-sm);
}

#cast-create-view .cast-create-author-tabs.cast-horizontal-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cast-editor-blue) 45%, transparent) transparent;
  scroll-behavior: smooth;
}
.cast-horizontal-tabs::-webkit-scrollbar { display: none; }
#cast-create-view .cast-create-author-tabs.cast-horizontal-tabs::-webkit-scrollbar {
  display: block;
  height: var(--cast-editor-space-xs);
}
.cast-horizontal-tabs > [role="tab"] { flex: 0 0 auto; white-space: nowrap; }

#cast-create-view .cast-create-author-shell .cast-summon-chip {
  display: flex;
  flex: 0 0 auto;
  min-height: 47px;
  width: max-content;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  gap: var(--cast-editor-space-xs);
  padding: var(--cast-editor-space-xs) var(--cast-editor-space-xs) var(--cast-editor-space-md);
  overflow: visible;
  white-space: nowrap;
  scroll-snap-align: start;
}

#cast-create-view .cast-create-tab-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

#cast-create-view .cast-create-required-mark {
  flex: 0 0 auto;
}

#cast-create-view .cast-create-author-shell .cast-summon-chip.active::after {
  right: var(--cast-editor-space-sm);
  bottom: -1px;
  left: var(--cast-editor-space-sm);
  width: auto;
  transform: none;
}

#cast-create-view .cast-create-tab-status {
  display: inline-flex;
  width: var(--cast-editor-space-md);
  height: var(--cast-editor-space-md);
  min-width: var(--cast-editor-space-md);
  min-height: var(--cast-editor-space-md);
  flex: 0 0 var(--cast-editor-space-md);
  align-items: center;
  justify-content: center;
  color: var(--cast-editor-blue);
  line-height: 1;
}

#cast-create-view .cast-create-tab-status[hidden] {
  display: none;
}

#cast-create-view .cast-create-tab-status .cast-icon {
  display: block;
  width: 12px;
  height: 12px;
}

#cast-create-view .cast-create-author-shell .cast-summon-chip[data-has-alert] .cast-create-tab-status {
  border-radius: 50%;
  background: var(--cast-editor-blue);
  color: #fff;
}

/* author shell はヘッダーを除いた .cast-create-scroll だけをスクロールさせる。
   本文側に余白を集約し、scroll と panel の二重paddingでカードが詰まるのを防ぐ。 */
#cast-create-view .cast-create-author-shell .cast-create-scroll {
  min-width: 0;
  padding: 0 0 calc(var(--cast-editor-space-2xl) + var(--safe-area-bottom));
}

#cast-create-view .cast-create-author-shell .cast-create-tab-body {
  width: 100%;
  min-width: 0;
  /* panel/card の最終子要素の margin に依存せず、四辺を同じ内側余白で閉じる。 */
  padding: var(--cast-editor-space-lg);
}

#cast-create-view .cast-create-author-shell .cast-create-section-head {
  margin: 0 var(--cast-editor-space-xs) var(--cast-editor-space-md);
}

#cast-create-view .cast-create-author-shell .cast-create-section-title {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  margin: 0;
  border-left: 0;
  padding-left: 0;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: .01em;
}

#cast-create-view .cast-create-author-shell .cast-create-section-title::before {
  width: 4px;
  height: 1em;
  flex: none;
  border-radius: 999px;
  background: var(--cast-editor-blue);
  content: "";
}

#cast-create-view .cast-create-author-shell .cast-create-section-desc {
  margin: var(--cast-editor-space-sm) 0 0 var(--cast-editor-space-md);
  line-height: 1.6;
}

/* 見出しの青バーは見出し文字だけの選択補助。旧 wrapper の border-left は
   説明文まで縦に伸びてタブの選択線と役割が重なるため、主見出し以外では出さない。 */
#cast-create-view .cast-create-author-shell .cast-character-tone-examples > .cast-editor-section-title,
#cast-create-view .cast-create-author-shell .cast-character-tone-examples-head .cast-editor-section-title,
#cast-create-view .cast-create-author-shell .cast-summon-rule-title {
  border-left: 0;
  padding-left: 0;
}
#cast-create-view .cast-create-author-shell .cast-character-tone-examples > .cast-editor-section-title::before,
#cast-create-view .cast-create-author-shell .cast-character-tone-examples-head .cast-editor-section-title::before,
#cast-create-view .cast-create-author-shell .cast-summon-rule-title::before {
  content: none;
}

#cast-create-view .cast-create-author-shell .cast-create-section-card {
  min-width: 0;
  padding: var(--cast-editor-space-lg) var(--cast-editor-space-md);
}

/* 予算の説明文はカード内の見出し・数値と同じ左右インセットに揃える。 */
#cast-create-view .cast-create-author-shell .cast-settings-budget {
  padding: var(--cast-editor-space-sm) var(--cast-editor-space-md);
}

#cast-create-view .cast-create-author-shell .cast-create-option-content.cast-editor-card {
  padding: var(--cast-editor-space-lg) var(--cast-editor-space-md);
  border: 0;
  border-radius: 0;
  background: transparent;
}

#cast-create-view .cast-create-author-shell .cast-character-tone-examples.cast-editor-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#cast-create-view .cast-create-author-shell .cast-create-option > summary.cast-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-md);
  list-style: none;
}
#cast-create-view .cast-create-author-shell .cast-create-option[open] > summary.cast-editor-btn {
  margin-bottom: var(--cast-editor-space-lg);
}
#cast-create-view .cast-create-author-shell .cast-create-option > summary.cast-editor-btn::-webkit-details-marker {
  display: none;
}
#cast-create-view .cast-create-author-shell .cast-create-option > summary.cast-editor-btn::marker {
  content: "";
}
#cast-create-view .cast-create-author-shell .cast-create-option-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: transform .15s ease;
}
#cast-create-view .cast-create-author-shell .cast-create-option-chevron .cast-icon {
  display: block;
  width: 14px;
  height: 14px;
}
#cast-create-view .cast-create-author-shell .cast-create-option[open] > summary .cast-create-option-chevron {
  transform: rotate(180deg);
}

#cast-create-view .cast-create-author-shell .cast-character-tone-examples-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cast-editor-space-md);
  margin-bottom: var(--cast-editor-space-md);
}
#cast-create-view .cast-create-author-shell .cast-character-tone-examples-head .cast-editor-section-title {
  min-width: 0;
}
#cast-create-view .cast-create-author-shell .cast-character-tone-examples-head .cast-create-tab-count {
  flex: 0 0 auto;
  margin: 0;
}
#cast-create-view .cast-create-author-shell .cast-character-tone-examples > .cast-create-add-btn {
  margin-top: var(--cast-editor-space-md);
}

/* 追加導線は2つの主ボタンを縦に積むため、インライン折返し任せにせず段階的な間隔を置く。 */
#cast-create-view .cast-create-author-shell .cast-character-add-flow {
  display: flex;
  flex-direction: column;
  gap: var(--cast-editor-space-md);
  margin-bottom: 0;
}

#cast-create-view .cast-create-author-shell .cast-character-add-flow .cast-create-add-btn,
#cast-create-view .cast-create-author-shell .cast-create-tab-body > .cast-create-add-btn.cast-editor-btn {
  padding: var(--cast-editor-space-md);
}

/* コピー導線の直後の説明が負の上余白でボタンに食い込まないようにする。 */
#cast-create-view .cast-create-author-shell .cast-character-add-flow + .cast-create-field-desc {
  margin-top: var(--cast-editor-space-md);
}

/* 各タブの最後の入力ブロック（ギャラリー・イントロ・人物設定）から
   オプション設定へ、同じ項目間隔を確保する。隣接 margin は collapse するため、
   直前に既存の下余白があっても二重にはならない。 */
#cast-create-view .cast-create-author-shell .cast-create-option {
  margin-top: var(--cast-editor-space-lg);
}

/* castIconSvg は cast 圏の既存 Lucide 風インライン SVG の共通描画。 */
#cast-create-view .cast-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}
#cast-create-view .cast-create-author-details > summary .cast-icon,
#cast-create-view .cast-create-journey-menu > summary .cast-icon {
  display: block;
  width: 18px;
  height: 18px;
}
#cast-create-view .cast-create-move-btn .cast-icon {
  display: block;
  width: 14px;
  height: 14px;
}
#cast-create-view .cast-create-move-up .cast-icon {
  transform: rotate(180deg);
}
#cast-create-view .cast-create-add-btn .cast-icon,
#cast-create-view .cast-character-card-add .cast-icon {
  width: 15px;
  height: 15px;
}
#cast-create-view .cast-create-remove-btn .cast-icon,
#cast-create-view .cast-gallery-tile-remove .cast-icon {
  display: block;
}
#cast-create-view .cast-gallery-tile-add-plus .cast-icon {
  display: block;
  width: 24px;
  height: 24px;
}

#cast-create-view .cast-create-author-shell .cast-create-section-card > .cast-member {
  margin: 0 0 var(--cast-editor-space-lg);
  padding: 0;
  border-top: 0;
}

#cast-create-view .cast-create-author-shell .cast-member-head {
  margin-bottom: var(--cast-editor-space-lg);
}

#cast-create-view .cast-create-author-shell .cast-member-main .cast-member-top {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

#cast-create-view .cast-create-author-shell .cast-member-main .cast-create-avatar-surface {
  width: 138px;
  height: 138px;
  margin: 0 auto var(--cast-editor-space-lg);
}

#cast-create-view .cast-create-author-shell .cast-member-main .cast-member-name-wrap {
  width: 100%;
}

#cast-create-view .cast-create-author-shell .cast-member .cast-create-field-desc {
  margin: var(--cast-editor-space-sm) 0 var(--cast-editor-space-sm);
}

/* 空の画像枠はモック同様、枠上に浮く青いラベルではなく、中央の案内として読む。 */
#cast-create-view .cast-create-author-shell .cast-create-avatar-surface.cast-create-avatar-circle-dashed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cast-editor-space-sm);
  padding: var(--cast-editor-space-md);
  background: color-mix(in srgb, var(--cast-editor-blue) 6%, transparent);
}

#cast-create-view .cast-create-author-shell .cast-create-avatar-surface.cast-create-avatar-circle-dashed > svg {
  display: none;
}

#cast-create-view .cast-create-author-shell .cast-create-avatar-surface.cast-create-avatar-circle-dashed::before {
  content: none;
}
#cast-create-view .cast-create-author-shell .cast-create-avatar-empty-plus {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-create-author-shell .cast-create-avatar-empty-plus .cast-icon {
  display: block;
  width: 34px;
  height: 34px;
}

#cast-create-view .cast-create-author-shell .cast-create-avatar-surface.cast-create-avatar-circle-dashed .cast-create-image-alert {
  position: static;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
#cast-create-view .cast-gallery-tile {
  overflow: visible;
}

@media (max-width: 360px) {
  #cast-create-view .cast-create-author-topline,
  #cast-create-view .cast-create-journey-header {
    padding-right: var(--cast-editor-space-md);
    padding-left: var(--cast-editor-space-md);
  }

  #cast-create-view .cast-create-author-heading h1,
  #cast-create-view .cast-create-journey-header h1 {
    font-size: 15px;
  }

  #cast-create-view .cast-create-author-button {
    padding-right: var(--cast-editor-space-sm);
    padding-left: var(--cast-editor-space-sm);
  }

  #cast-create-view .cast-create-author-shell .cast-summon-chip {
    font-size: 11px;
  }
}

/* ワードミュート（設定 > プライバシーと安全 > ミュート） */
.settings-detail-section-title {
  margin-top: 18px;
  font-weight: 700;
  color: var(--text);
}

.settings-detail-card > .settings-detail-section-title:first-child {
  margin-top: 0;
}

.muted-keyword-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 16px;
}

.muted-keyword-form .profile-edit-input {
  flex: 1 1 auto;
  min-width: 0;
}

.muted-keyword-add-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
}

.muted-keyword-text {
  min-width: 0;
  font-size: 15px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* スレッド内でワードミュートに当たった返信の折りたたみ表示。
   消すと会話が欠けるので、プレースホルダを置いてタップで開けるようにする。 */
.comment-post-card-muted .comment-avatar-rail {
  visibility: hidden;
}

.muted-comment-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 2px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted, var(--text-secondary, #6b7280));
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.muted-comment-placeholder:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.muted-comment-placeholder-cta {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 700;
}

/* ===== 料金プラン / 会話の残量（2026-08-12） =====================================
   既存UIの見た目は変えない。ここで足すのは、billingEnabled のときにだけ現れる
   要素のスタイルだけ。塗りで区切らず hairline と余白で分ける（cast全体の規範）。 */

/* サイドバーの残量一行。行（.cast-row）ではなく注記のまま、残量を気にした瞬間に
   料金プランへ行けるよう行き先を持たせた（2026-08-05）。塗りやボタンらしい枠は
   足さず、押せることは .cast-closing-link 準拠の文字色/下線だけで伝える。 */
.cast-quota-note {
  display: block;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 4px 12px 0;
  font-family: inherit;
  font-size: 12px;
  /* 色は据え置き（var(--text-secondary)）。下線だけで押せることを示す、割り込み的に
     目立たせない方針。primary色にする案もあるが、まずは注記のトーンを保つ。 */
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
}

/* 選べない選択肢（Pro未加入時）。無効化ではなく「行き先のある行」なので disabled にせず、
   文字色だけ落として料金プランへの導線であることを注記で示す。 */
.cast-persona-sheet-row-locked .cast-persona-sheet-name {
  color: var(--text-secondary);
}

/* ロック行の小バッジ（2026-08-05 P0-3）。行名が既に「Proモデル」と書いているため
   テキストは繰り返さずロックアイコンのみ。寸法は既存の .api-key-badge を流用
   （新規サイズを発明しない）。色だけ新規に足す — 塗りで区別しない cast の規範に
   合わせ、ごく薄い塗り・輪郭は併用しない最小限の配色。 */
.cast-model-pro-badge {
  color: var(--text-secondary);
  background: var(--bg-secondary, rgba(0, 0, 0, 0.06));
}

/* Lunaベータバッジ（2026-08-14）。寸法は既存の .api-key-badge を流用（新規サイズを
   発明しない）。色だけベータ専用に足す — 青文字・青枠・淡い青地の3点で「ベータ」を
   伝える（色だけに頼らず、テキスト自体も「ベータ」固定で読める）。モバイル幅でも
   .cast-persona-sheet-name の inline-flex に収まるサイズに抑えてある。 */
.cast-model-beta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
  color: #2563eb;
  border: 1px solid #2563eb;
  background: color-mix(in srgb, #2563eb 10%, transparent);
}

/* Gemini 3.8の期間限定ベータ。基底バッジの寸法と行内配置は変えず、静的な虹色で
   期間限定であることを目立たせる。白文字の下に濃色を重ね、明るい帯でも可読性を保つ。 */
.cast-model-beta-badge--limited {
  color: #fff;
  border-color: transparent;
  background: #334155;
  background:
    linear-gradient(rgba(15, 23, 42, 0.56), rgba(15, 23, 42, 0.56)) padding-box,
    linear-gradient(110deg, #ef4444 0%, #f59e0b 18%, #22c55e 36%, #06b6d4 54%, #3b82f6 70%, #8b5cf6 84%, #ec4899 100%) border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* 締めの演出は「セリフの吹き出し」と「事務行」の2段構成。親の .zeta-chat-message は
   display:flex の横並びなので、指定が無いと事務行が吹き出しの**横**に回り込み、
   幅が足りずに重なって読めなくなる（2026-08-05 実機390px幅で毎回再現）。
   この要素だけ縦積みにして、意図どおり吹き出しの下に置く。 */
.cast-closing {
  flex-direction: column;
  align-items: flex-start;
}

/* 締めの演出の事務行。キャストのセリフ（吹き出し）とは別の層に置く。
   左右の padding は吹き出し（.zeta-chat-bubble）と同じ 14px にして、
   セリフの字面と事務行の左端を揃える（独自の寸法は作らない）。 */
.cast-closing-note {
  margin: 6px 0 0;
  padding: 0 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 締めカードのCTA（2026-08-05 P0-4）。下線テキストリンクをやめ、キャラ台詞の外＝
   システム領域にグレー輪郭線ボタンとして分離。寸法は新規に作らず、既存の
   .ghost-button（輪郭線）と .btn-sm（料金ページの黒ピルと同じ padding/font-size）を
   そのまま組み合わせている。ここで足すのは前の行との間隔だけ（.pricing-plan-buy の
   margin-top: 12px に合わせた）。 */
.cast-closing-cta {
  margin: 12px 14px 0;
}

.cast-closing-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

/* 料金ページ本体（2026-08-09 再デザイン）。
   Claude/ChatGPTのモバイル課金ページを参考に、1画面1判断・白カード+大きな価格+
   チェックリスト+全幅の黒(反転)pill CTA という構成に変更。細かい注記・fairUseNote は
   「詳しくはこちら」のサブビュー（.pricing-details-screen）へ逃がしている。 */
.pricing-screen {
  padding: 8px 16px 32px;
}

.cast-credit-card,
.cast-credit-widget {
  padding: var(--s3);
  border: 1px solid var(--border-card);
  border-radius: var(--s3);
  background: var(--bg);
  color: var(--text);
}
.cast-credit-card { margin: 0 0 var(--s4); }
.cast-credit-widget { margin: var(--s2) var(--s3) var(--s3); }
.cast-credit-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: #286aa8;
  font-size: 13px;
}
.cast-credit-value { margin: var(--s2) 0; font-size: 20px; font-weight: 700; }
.cast-credit-widget .cast-credit-value { font-size: 16px; }
.cast-credit-track {
  height: var(--s2);
  overflow: hidden;
  border-radius: var(--s2);
  background: var(--bg-secondary);
}
.cast-credit-track span { display: block; height: 100%; background: #286aa8; }
.cast-credit-detail {
  margin: var(--s2) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}
.cast-credit-link {
  display: inline-block;
  margin-top: var(--s2);
  border: 0;
  padding: 0;
  background: none;
  color: #286aa8;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (min-width: 700px) {
  .cast-credit-card { max-width: 680px; }
}

/* 8/11以前登録ユーザー向けの正直表示（2026-08-11 オーナー要望「もうすこし目立つといい」）。
   文言は1文字も変えられない（tests/cast-billing-wording.test.ts が「無制限」表記を
   許す唯一の一行として、この行を app.js ソース上の連続した文字列として検査しているため、
   文中に太字タグを差し込んで分割することはできない）。そのため強調は行全体にかけ、
   枠線・背景トーン・太字・余白の4点で作る。新しい色は増やさない。
   背景は .pricing-plan-free と同じ --bg-secondary（トーン差）だが、境界線は
   --border ではなく --border-card にする — ライトテーマでは --border と --bg-secondary が
   同値(#eff3f4)で境界線が消えるため（.pricing-plan-free が意図的に境界を沈めているのと
   同じ理由。ここは逆に目立たせたいので視認できる --border-card を使う）。 */
.pricing-legacy-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  background: var(--bg-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--text);
}

.pricing-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* カードの寸法は既存の .quoted-post-card / .report-banner-btn と同じトークン
   （border-card + var(--bg)）を流用。新規の色・角丸半径は発明していない。 */
.pricing-plan {
  padding: 20px;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  background: var(--bg);
}

/* 無料プランはCTAが無く、選ぶ判断も要らない層なので、コンパクトな情報カードに留める
   （視覚的な重みを、実際に選ぶ2枚の有料プランへ集中させる）。 */
.pricing-plan-free {
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-color: var(--border);
}

.pricing-plan-current {
  border-color: var(--text-secondary);
}

.pricing-plan-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pricing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 0;
}

.pricing-plan-price-amount {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.pricing-plan-free .pricing-plan-price-amount {
  font-size: 20px;
}

.pricing-plan-price-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.pricing-plan-lines {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.pricing-plan-lines li {
  position: relative;
  padding-left: 22px;
}

.pricing-plan-lines li + li {
  margin-top: 6px;
}

/* チェックマークはCSSのみで足す（<li>のテンプレートはSPEC固定の生HTML注入無し構造
   なので、ここにアイコン要素を差し込まない）。 */
.pricing-plan-lines li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-secondary);
  font-weight: 700;
}

/* fairUseNote はProカードの強調行（週の回数を気にしなくてよい旨）に対する打消し表示。
   景表法の考え方に合わせ詳細ビューへは逃さず、強調表示に隣接するカード内に残す
   （2026-08-09 監督裁定）。 */
.pricing-plan-fairuse,
.pricing-plan-legacy-note,
.pricing-plan-current-label,
.pricing-plan-cancel-note,
.pricing-plan-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 加入中カードの常設の解約導線（P1-1、2026-08-09）。黒pill（購入CTA専用）とは
   はっきり分け、.pricing-details-toggle と同じ「文字色+下線」の控えめな見た目を
   そのまま流用する（新しい視覚語彙を作らない）。 */
.pricing-plan-manage {
  margin: 6px 0 0;
}

/* 全幅CTA（オーナー最重要要望「もっと目立たせる」）。色・反転・disabled等は
   .btn-primary をそのまま使い（ライト=黒pill/ダーク=白pillは.btn-primaryが既に
   面倒を見ている）、ここでは全幅化と最低高さだけを足す。checkout/upgradeどちらの
   アクションも同じクラスを使うため、アップグレード後の既存加入者だけ小さいまま
   取り残されることがない。 */
.pricing-cta {
  display: flex;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
}

.pricing-common-note,
.pricing-status,
.pricing-legal {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* サーバーから来る案内文には改行を含むものがある（¥100→上位プランの切替案内など）。
   HTMLの既定では改行が空白に潰れて1行になってしまうため、改行だけを活かす。 */
.pricing-status {
  white-space: pre-line;
}

.pricing-status:empty {
  margin: 0;
}

.pricing-portal-btn {
  margin-top: 8px;
}

/* 「詳しくはこちら」導線とサブビュー（2026-08-09）。新しいハッシュルートは作らず
   renderPricing() 内の出し分けで実現しているため、リンク自体は .cast-quota-note と
   同じ「文字色+下線、ボタンらしい枠は無し」パターンを流用する。 */
.pricing-details-link {
  margin: 12px 0 0;
  text-align: center;
}

.pricing-details-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.pricing-details-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.pricing-detail-note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Cast appearance V1. CSS custom properties are the sole resolved token interface used by
   live casual/story/multi-Cast rendering, the editor preview, and chat-screenshot.css. */
.cast-chat-widget-root .zeta-chat-message-user .zeta-chat-bubble {
  background: var(--cast-user-surface, var(--cast-user-bubble-bg));
  color: var(--cast-user-surface-text, var(--cast-user-bubble-text));
}

.cast-chat-widget-root .cast-chat-content > .zeta-chat-message-body,
.cast-chat-widget-root .cast-novel-dialogue-body {
  padding: 12px 14px;
  background: var(--cast-character-surface, var(--cast-novel-bubble-bg, #f7f9f9));
  color: var(--cast-character-surface-text, var(--text));
}

.cast-chat-widget-root .cast-chat-content > .zeta-chat-message-body {
  border-radius: 0 16px 16px 16px;
}

.cast-chat-widget-root .cast-novel-narration,
.cast-chat-widget-root .zeta-chat-shell.has-chat-bg .cast-novel-narration {
  box-sizing: border-box;
  inline-size: fit-content;
  max-inline-size: calc(100% - 40px);
  margin: 0;
  margin-inline-start: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cast-narration-surface, #fff);
  color: var(--cast-narration-surface-text, var(--text-secondary));
}

.cast-chat-widget-root .cast-novel-narration-icon {
  left: auto;
  inset-inline-start: -40px;
  color: var(--cast-narration-icon-text, var(--cast-narration-surface-text, var(--text-secondary)));
}

/* The V1 marker deliberately outranks legacy theme/readability selectors that assign direct
   rgba backgrounds. This keeps one surface token path across light/dark and background modes. */
:root .cast-chat-widget-root .zeta-chat-shell[data-chat-auto-readability] .cast-chat-content > .zeta-chat-message-body,
:root .cast-chat-widget-root .zeta-chat-shell[data-chat-auto-readability] .cast-novel-dialogue-body {
  background: var(--cast-character-surface);
  color: var(--cast-character-surface-text);
}

:root .cast-chat-widget-root .zeta-chat-shell[data-chat-auto-readability] .cast-novel-narration,
:root[data-theme="dark"] .cast-chat-widget-root .zeta-chat-shell[data-chat-auto-readability].has-chat-bg .cast-novel-narration {
  background: var(--cast-narration-surface);
  color: var(--cast-narration-surface-text);
}

.zeta-chat-sheet.cast-appearance-sheet {
  max-width: 720px;
}

.zeta-chat-sheet.cast-appearance-sheet .zeta-chat-sheet-content {
  block-size: min(900px, calc(100dvh - 24px - env(safe-area-inset-top, 0px)));
  overflow: hidden;
}

.zeta-chat-sheet.cast-appearance-sheet .zeta-chat-sheet-body {
  flex: 1 1 auto;
  overflow: hidden;
  padding-block-end: 0;
}

.cast-appearance-editor {
  display: grid;
  /* 390x844の本番メッセージ実測（narration+Cast 151.56px、gap 10px、user
     49.19px、preview padding/border 30px）を収める通常時の下限。 */
  grid-template-rows: clamp(15.5rem, 30dvh, 18rem) auto minmax(0, 1fr) auto;
  gap: 12px;
  min-block-size: 0;
  block-size: 100%;
  padding-block-start: 4px;
}

.cast-appearance-preview {
  position: relative;
  isolation: isolate;
  min-block-size: 0;
  block-size: 100%;
  padding: 14px 12px;
  overflow: hidden;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg-secondary);
}

.cast-appearance-preview::before,
.cast-appearance-preview-scrim {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.cast-appearance-preview::before {
  background-color: var(--chat-bg-solid, transparent);
  background-image: var(--chat-bg-image, none);
  background-position: var(--chat-bg-position, center);
  background-size: cover;
  filter: blur(var(--chat-bg-blur, 0px));
  opacity: var(--chat-bg-opacity, 1);
  transform: scale(var(--chat-bg-scale, 1));
}

.cast-appearance-preview-scrim {
  z-index: -1;
  background: rgba(255, 255, 255, 0.04);
}

.cast-appearance-preview[data-auto-readability="on"] .cast-appearance-preview-scrim {
  background: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .cast-appearance-preview-scrim {
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .cast-appearance-preview[data-auto-readability="on"] .cast-appearance-preview-scrim {
  background: rgba(0, 0, 0, 0.14);
}

.cast-appearance-preview-messages {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-block-size: 0;
  block-size: 100%;
  overflow: hidden;
}

.cast-appearance-preview .zeta-chat-message {
  flex: 0 0 auto;
}

/* プレビューも本番クラスのまま描く。既存のdark/背景セレクタより詳細度を上げ、
   外側の保存済みlegacy変数ではなくプレビュー自身のV1トークンを必ず参照する。 */
:root .cast-chat-widget-root .cast-appearance-preview .zeta-chat-message-user .zeta-chat-bubble {
  background: var(--cast-user-surface);
  color: var(--cast-user-surface-text);
}

:root .cast-chat-widget-root .cast-appearance-preview .cast-novel-dialogue-body {
  background: var(--cast-character-surface);
  color: var(--cast-character-surface-text);
}

:root .cast-chat-widget-root .cast-appearance-preview .cast-novel-narration {
  background: var(--cast-narration-surface);
  color: var(--cast-narration-surface-text);
}

:root .cast-chat-widget-root .cast-appearance-preview .cast-novel-narration-icon {
  background: var(--cast-narration-surface);
  color: var(--cast-narration-icon-text, var(--cast-narration-surface-text));
}

.cast-appearance-tabs {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}

.cast-appearance-tabs [role="tab"] {
  min-block-size: 44px;
  padding: 8px 6px;
  border: 0;
  border-block-end: 3px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.cast-appearance-tabs [role="tab"][aria-selected="true"] {
  border-block-end-color: var(--primary);
  color: var(--text);
}

.cast-appearance-settings-scroll {
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.cast-appearance-section {
  display: grid;
  gap: 12px;
  padding-block: 12px 18px;
}

.cast-appearance-section[hidden] {
  display: none;
}

.cast-appearance-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cast-appearance-section-title {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.cast-appearance-section-hint {
  margin: -4px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.cast-text-colors-title {
  margin-block-start: 8px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-card, var(--border));
}

.cast-text-color-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-card, var(--border));
  border-radius: 12px;
  background: var(--bg);
}

.cast-text-color-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.cast-text-color-card p {
  margin: -5px 0 0;
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.45;
}

.cast-text-color-card > .cast-text-color-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cast-text-color-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.cast-text-color-modes button {
  min-block-size: 40px;
  padding: 7px 9px;
  border: 1px solid var(--border-card, var(--border));
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.cast-text-color-modes button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft, color-mix(in srgb, var(--primary) 12%, var(--bg)));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.cast-text-color-picker {
  display: grid;
  gap: 7px;
}

.cast-text-color-picker[hidden] {
  display: none;
}

.cast-text-color-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cast-text-color-swatch,
.cast-text-color-custom {
  position: relative;
  min-inline-size: 0;
  min-block-size: 44px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--border-card, var(--border));
  border-radius: 10px;
  background: var(--swatch, var(--bg));
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.cast-text-color-swatch[style*="#FFFFFF"] {
  color: #20242b;
}

.cast-text-color-swatch.is-selected {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cast-text-color-custom {
  overflow: hidden;
  border-style: dashed;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
}

.cast-text-color-custom input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.cast-text-color-custom:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cast-appearance-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 6px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-head h3 span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

.cast-appearance-library-create,
.cast-appearance-library-item button,
.cast-appearance-library-card button,
.cast-appearance-library-form button {
  min-block-size: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.cast-appearance-library-list {
  display: grid;
  gap: 8px;
}

.cast-appearance-library-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  border-block-end: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-card.is-selected {
  box-shadow: inset 3px 0 0 var(--primary);
}

.cast-appearance-library-card .cast-appearance-library-apply {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-block-size: 68px;
  border: 0;
  text-align: start;
}

.cast-appearance-library-card .cast-appearance-preset-mini {
  grid-row: 1 / 3;
}

.cast-appearance-library-card-name {
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-appearance-library-current-label {
  align-self: start;
  color: var(--primary);
  font-size: 0.72rem;
}

.cast-appearance-library-disclosure {
  align-self: stretch;
  min-inline-size: 44px;
  border: 0;
  border-inline-start: 1px solid var(--border-card, var(--border));
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.2rem;
}

.cast-appearance-library-card-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 0 8px;
}

.cast-appearance-library-card-actions[hidden] {
  display: none;
}

.cast-appearance-library-card-actions button,
.cast-appearance-library-load-error button,
.cast-appearance-library-warning button,
.cast-appearance-library-current-actions button {
  min-block-size: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cast-appearance-library-current {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding-block: 8px;
  border-block: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-current > div:not(.cast-appearance-library-current-actions) {
  display: grid;
  gap: 2px;
}

.cast-appearance-library-current > div span {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.cast-appearance-library-current-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.cast-appearance-library-load-error,
.cast-appearance-library-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--danger, #c62828);
  font-size: 0.78rem;
}

.cast-appearance-library-load-error p,
.cast-appearance-library-warning p {
  margin: 0;
}

.cast-appearance-recommended-head {
  margin-block-start: 10px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  border-block-end: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-item button {
  border: 0;
  border-inline-start: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-item .cast-appearance-library-apply {
  border-inline-start: 0;
  text-align: start;
}

.cast-appearance-library-apply.is-selected {
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 800;
}

.cast-appearance-library-form {
  display: grid;
  gap: 8px;
  padding-block: 10px;
  border-block: 1px solid var(--border-card, var(--border));
}

.cast-appearance-library-subview {
  display: grid;
  align-content: start;
  min-block-size: 0;
  padding-block: 8px;
}

.cast-appearance-library-form > label {
  font-size: 0.8rem;
  font-weight: 700;
}

.cast-appearance-library-form > input {
  min-block-size: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.cast-appearance-library-form > input[aria-invalid="true"] {
  border-color: var(--danger, #c62828);
  border-width: 2px;
}

.cast-appearance-library-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cast-appearance-library-hint,
.cast-appearance-library-error,
.cast-appearance-library-status {
  min-block-size: 1em;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.cast-appearance-library-error {
  color: var(--danger, #c62828);
}

.cast-appearance-preset {
  position: relative;
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 6px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  text-align: start;
}

.cast-appearance-preset.is-selected {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.cast-appearance-selected-mark {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  background: var(--bg);
  color: var(--text);
  font-weight: 800;
}

.cast-appearance-preset-mini {
  display: grid;
  gap: 4px;
  aspect-ratio: 4 / 3;
  padding: 10px 7px;
  overflow: hidden;
  background-color: var(--mini-bg, var(--bg-secondary));
  background-image: var(--mini-bg-image, none);
  background-position: center;
  background-size: cover;
}

.cast-appearance-preset-mini i,
.cast-appearance-preset-mini b,
.cast-appearance-preset-mini em {
  display: block;
  block-size: 7px;
  border-radius: 2px;
}

.cast-appearance-preset-mini i { inline-size: 72%; background: var(--mini-narration); }
.cast-appearance-preset-mini b { inline-size: 62%; background: var(--mini-character); }
.cast-appearance-preset-mini em { inline-size: 58%; margin-inline-start: auto; background: var(--mini-user); }

.cast-appearance-color-row {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cast-appearance-color-row legend {
  margin-block-end: 6px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.cast-appearance-recent {
  display: grid;
  gap: 6px;
}

.cast-appearance-recent:empty {
  display: none;
}

.cast-appearance-color-group-label {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.cast-appearance-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.cast-appearance-swatch {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 2px solid var(--border-card, var(--border));
  background: var(--swatch, var(--bg));
  color: var(--swatch-check, #fff);
  font: inherit;
  font-weight: 900;
}

.cast-appearance-swatch[style*="#D8"],
.cast-appearance-swatch[style*="#DD"],
.cast-appearance-swatch[style*="#FB"],
.cast-appearance-swatch[style*="#E8"] { color: #000; }

.cast-appearance-swatch.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.cast-appearance-swatch-custom {
  background: var(--bg);
  color: var(--text);
  font-size: 1.35rem;
}

.cast-appearance-color-detail {
  display: grid;
  grid-template-columns: auto 48px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--bg-secondary);
}

.cast-appearance-color-detail label {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.cast-appearance-color-detail input[type="color"] {
  inline-size: 44px;
  block-size: 44px;
  padding: 2px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
}

.cast-appearance-background-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cast-appearance-background-choice {
  min-block-size: 44px;
  padding: 8px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
}

.cast-appearance-background-choice.is-selected {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  font-weight: 700;
}

.cast-appearance-background-preset span {
  display: block;
  inline-size: 100%;
  aspect-ratio: 2 / 1;
  margin-block-end: 5px;
}

.cast-appearance-solid-row,
.cast-appearance-auto-row,
.cast-appearance-range-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 44px;
  color: var(--text);
  font-size: 0.84rem;
}

.cast-appearance-solid-row input[type="color"] {
  inline-size: 48px;
  block-size: 40px;
}

.cast-appearance-auto-row {
  justify-content: flex-start;
}

.cast-appearance-auto-row input {
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--primary);
}

.cast-appearance-section input[type="range"] {
  inline-size: 100%;
  min-block-size: 32px;
  margin-inline: 0;
  accent-color: var(--primary);
}

.cast-appearance-reset-link {
  justify-self: start;
  min-block-size: 36px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cast-appearance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-block: 10px max(10px, env(safe-area-inset-bottom));
  background: var(--bg);
}

.cast-appearance-actions button {
  min-block-size: 48px;
  border: 1px solid var(--border-card, var(--border));
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.cast-appearance-actions .cast-appearance-done {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--bg);
}

.cast-appearance-editor :where(button, input):focus-visible,
.zeta-chat-sheet.cast-appearance-sheet .zeta-chat-sheet-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.cast-appearance-preview[data-chat-bg-preset="sunset"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="sunset"],
.cast-appearance-background-preset span[data-chat-bg-preset="sunset"] { background-image: linear-gradient(160deg, #f3d3b8, #c98a86 70%, #8a6a86); }
.cast-appearance-preview[data-chat-bg-preset="night-sky"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="night-sky"],
.cast-appearance-background-preset span[data-chat-bg-preset="night-sky"] { background-image: linear-gradient(165deg, #1b2238, #2c3454 75%, #383f5c); }
.cast-appearance-preview[data-chat-bg-preset="paper"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="paper"],
.cast-appearance-background-preset span[data-chat-bg-preset="paper"] { background-image: linear-gradient(160deg, #f2ede1, #e4dac5); }
.cast-appearance-preview[data-chat-bg-preset="sprout"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="sprout"],
.cast-appearance-background-preset span[data-chat-bg-preset="sprout"] { background-image: linear-gradient(160deg, #e4ecd8, #a9c396); }
.cast-appearance-preview[data-chat-bg-preset="sea"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="sea"],
.cast-appearance-background-preset span[data-chat-bg-preset="sea"] { background-image: linear-gradient(160deg, #dbe9ec, #86adb8); }
.cast-appearance-preview[data-chat-bg-preset="mono"]::before,
.cast-appearance-preset-mini[data-chat-bg-preset="mono"],
.cast-appearance-background-preset span[data-chat-bg-preset="mono"] { background-image: linear-gradient(160deg, #e6e6e6, #b3b3b3); }

@media (max-width: 699px) {
  .zeta-chat-sheet.cast-appearance-sheet {
    max-width: none;
  }
  .zeta-chat-sheet.cast-appearance-sheet .zeta-chat-sheet-content {
    block-size: calc(100dvh - 8px - env(safe-area-inset-top, 0px));
    max-block-size: none;
  }
  .cast-appearance-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast-appearance-background-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 200%ズーム相当ではCSS viewportの縦横が半分になる。本番メッセージの相対形状は変えず、
   プレビュー列全体だけを縮小してナレーション/Cast/ユーザーの3種を欠けさせない。 */
@media (max-height: 600px) {
  .cast-appearance-editor {
    grid-template-rows: clamp(9.5rem, 36dvh, 11rem) auto minmax(0, 1fr) auto;
  }
  .cast-appearance-preview { padding: 8px; }
  .cast-appearance-preview-messages {
    inline-size: 156.25%;
    block-size: 156.25%;
    transform: scale(0.64);
    transform-origin: left top;
  }
}

@media (max-height: 400px) {
  .cast-appearance-editor {
    grid-template-rows: clamp(7rem, 36dvh, 9.5rem) auto minmax(0, 1fr) auto;
  }
  .cast-appearance-preview { padding: 6px; }
  .cast-appearance-preview-messages {
    inline-size: 181.82%;
    block-size: 181.82%;
    transform: scale(0.55);
  }
}

@media (pointer: coarse) {
  .cast-appearance-swatch { inline-size: 48px; block-size: 48px; }
  .cast-appearance-background-choice { min-block-size: 48px; }
}

.inquiries-admin {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s5);
  color: var(--text);
}
/* お問い合わせの自分側アイコンは cast のユーザー側ペルソナ列
   （.cast-chat-widget-root .zeta-chat-message-user.has-cast-persona 一式）をそのまま使う。
   2026-08-25: 専用クラスで cast の値を写す方式は撤去した（名前行のぶん吹き出しが下がる
   という cast の縦関係まで再現できず、実機で「吹き出しが上すぎる」と出たため）。 */
.inquiries-header { border-bottom: 1px solid var(--border); padding-bottom: var(--s3); }
.inquiries-back { display: inline-block; min-height: 48px; padding: 12px 0; color: inherit; }
.inquiries-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.inquiries-heading-row > button { flex-shrink: 0; white-space: nowrap; }
.inquiries-heading-row h1 { margin: var(--s1) 0 var(--s2); }
.inquiries-subtitle { max-width: 720px; margin: 0; color: var(--text-secondary); line-height: 1.6; }
.inquiries-status { min-height: 24px; padding: 10px 0 0; color: var(--text-secondary); }
.inquiries-toolbar { display: flex; align-items: flex-end; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.inquiries-search { display: grid; gap: 5px; flex: 1; max-width: 520px; }
.inquiries-search label, .inquiries-reply-form label { font-weight: 700; }
.inquiries-search input, .inquiries-reply-form textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--border-card); border-radius: 6px; background: var(--bg); color: inherit; font: inherit; }
.inquiries-filter { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 0; border: 0; }
.inquiries-filter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inquiries-filter label { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.inquiries-filter input { width: 18px; height: 18px; accent-color: var(--accent); }
.inquiries-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); min-height: 620px; border: 1px solid var(--border); border-top: 0; }
.inquiries-list-pane { min-width: 0; border-right: 1px solid var(--border); }
.inquiries-list { list-style: none; margin: 0; padding: 0; }
.inquiries-list > li { margin: 0; padding: 0; position: relative; }
/* お問い合わせ相手のプロフィールへのリンク。inquiry-thread-row(button)の外側=liの
   兄弟としてDOM上に置き、アバターの位置に重ねて配置する（<button>内への<a>ネストを避けるため）。
   タップ領域はアバターと同じ44x44（40x40の目安を満たす）。 */
.inquiry-avatar-link { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 50%; z-index: 1; }
.inquiry-avatar-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.inquiries-list-pane h2 { margin: 0; padding: 16px; font-size: 1rem; border-bottom: 1px solid var(--border); }
.inquiries-list { display: grid; }
.inquiries-load-more { display: block; width: 100%; margin: 0; padding: 12px; border-radius: 0; border-width: 0 0 1px; }
.inquiry-thread-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 82px; padding: 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.inquiry-thread-row:hover, .inquiry-thread-row:focus-visible, .inquiry-thread-row.is-selected { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.inquiry-thread-row:focus-visible, .inquiries-admin button:focus-visible, .inquiries-admin input:focus-visible, .inquiries-admin textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.inquiry-avatar { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-secondary); color: var(--text); font-weight: 700; }
.inquiry-avatar-operation { background: var(--primary); color: var(--bg); }

.cast-ambient-entry {
  min-height: 68px; margin: 0 0 13px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 13px; border: 1px solid var(--border-card); border-radius: 16px; background: var(--bg); color: var(--text); text-decoration: none;
}
.cast-ambient-entry:hover { background: var(--bg-hover); }
.cast-ambient-entry strong, .cast-ambient-entry small { display: block; }
.cast-ambient-entry strong { font-size: 14px; font-weight: 650; }
.cast-ambient-entry small { margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.cast-ambient-entry svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 課金プランバッジ（お問い合わせ管理: 一覧行・スレッドヘッダー共通）。
   Pro/Plus/旧無制限/無料を控えめな配色で判別できるようにする。 */
.inquiry-plan-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.inquiry-plan-badge-free { background: var(--bg-secondary); color: var(--text-secondary); }
.inquiry-plan-badge-legacy { background: var(--bg-secondary); color: var(--text-secondary); font-style: italic; }
.inquiry-plan-badge-cast500 { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
/* Codexレビュー P2-2: color:var(--success)単体だとlightテーマで18%ティント背景に対しコントラスト比 約2.1:1(4.5:1未達)。文字色を var(--success) と var(--text) の55:45混色にし、light=5.17:1 / dark=9.02:1（計算値、後述コミットメッセージ/PRに実測記載）に引き上げる。新規の生16進色は追加せず既存トークンのcolor-mixのみで解く。 */
.inquiry-plan-badge-cast1500 { background: color-mix(in srgb, var(--success) 18%, transparent); color: color-mix(in srgb, var(--success) 55%, var(--text) 45%); }
.inquiry-detail-profile-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.inquiry-thread-main { min-width: 0; flex: 1; }
.inquiry-thread-head { display: flex; justify-content: space-between; gap: 10px; }
.inquiry-thread-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-thread-head time { flex: none; color: var(--text-secondary); font-size: .8rem; }
.inquiry-thread-preview { display: block; overflow: hidden; margin-top: 7px; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.inquiry-thread-status { display: block; margin-top: 5px; color: var(--accent); font-size: .8rem; font-weight: 700; }
.inquiries-state { padding: 20px 16px; color: var(--text-secondary); }
.inquiries-error, .inquiries-form-error { color: var(--danger); }
.inquiries-detail, .inquiries-detail-placeholder { min-width: 0; }
.inquiries-detail-placeholder { display: grid; place-items: center; padding: 24px; color: var(--text-secondary); }
.inquiries-detail-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.inquiries-detail-head h2 { margin: 0; font-size: 1.1rem; }
.inquiries-detail-meta { margin: 4px 0 0; color: var(--text-secondary); font-size: .9rem; }
.inquiries-detail-status { margin: 6px 0 0; color: var(--text-secondary); font-size: .9rem; }
.inquiries-mobile-back { display: none; }
.inquiries-messages { overflow: auto; min-height: 360px; max-height: 520px; padding: 20px; }
.inquiry-message-list { display: grid; gap: 16px; }
.inquiry-message { display: flex; align-items: flex-start; gap: 10px; max-width: 86%; }
.inquiry-message.is-operation { margin-left: auto; flex-direction: row-reverse; }
.inquiry-message-content { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.inquiry-message.is-user .inquiry-message-content { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.inquiry-message-label { margin-bottom: 4px; color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
.inquiry-message-content p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.inquiry-message-images { display: grid; gap: 8px; margin-top: 8px; }
.inquiry-message-images img { display: block; width: min(100%, 320px); height: auto; max-height: 320px; object-fit: contain; border-radius: 6px; }
.inquiry-message-content time { display: block; margin-top: 6px; color: var(--text-secondary); font-size: .76rem; }
.inquiry-message-avatar { flex: 0 0 44px; }
.inquiries-reply-form { display: grid; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.inquiries-reply-form textarea { min-height: 110px; resize: vertical; }
.inquiries-help { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.inquiries-reply-form button { justify-self: end; min-width: 120px; min-height: 48px; }

/* タイムライン挿入枠: ZYN相談カード（オーナー見本 2026-09-21）。 */
.zyn-consult-card { padding-top: 12px; padding-bottom: 14px; background: var(--bg); cursor: default; }
.zyn-consult-card:hover { background: var(--bg); }
.zyn-consult-avatar {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-top: 6px;
  border-radius: 50%;
  background: #dff2ff;
  color: #0f1419;
}
:root[data-theme="dark"] .zyn-consult-avatar { background: #bfe5fb; }
.zyn-consult-avatar .icon-zyn-mark { width: 30px; height: 30px; }
.zyn-consult-meta { justify-content: space-between; }
.zyn-consult-title {
  margin: 3px 0 0;
  color: var(--text);
  font-size: clamp(18px, 4.6vw, 20px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.zyn-consult-description { margin: 1px 0 12px; color: var(--text); font-size: 15px; line-height: 1.45; }
.zyn-consult-input {
  display: block;
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 14px 15px;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.zyn-consult-input::placeholder { color: var(--text-secondary); opacity: .88; }
.zyn-consult-input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 155, 240, .18); }
.zyn-consult-input-meta { display: flex; justify-content: space-between; min-height: 20px; margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.zyn-consult-error { color: var(--danger, #d93025); }
.zyn-consult-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.zyn-consult-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 650;
}
.zyn-consult-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(29, 155, 240, .12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .18); }
.zyn-consult-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(29, 155, 240, .08);
  border-radius: 13px;
  background: #dff2ff;
  color: #0877c9;
  font-weight: 800;
}
:root[data-theme="dark"] .zyn-consult-submit { border-color: rgba(124, 196, 248, .24); background: rgba(30, 108, 160, .34); color: #9bd5fc; }
.zyn-consult-submit:hover { filter: brightness(.96); }
.zyn-consult-submit:disabled { opacity: .6; cursor: wait; }
.zyn-consult-private { margin: 6px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.4; text-align: center; }
.zyn-consult-card button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Cast lorebooks v2: full-screen pages sit above the app's fixed bottom navigation. */
#cast-lorebook-ui-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  color-scheme: inherit;
  isolation: isolate;
  font-family: inherit;
  -webkit-text-size-adjust: 100%;
}
#cast-lorebook-ui-root[hidden] { display: none !important; }
body.cast-lorebook-ui-active { overflow: hidden; }
.cast-lorebook-load-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.cast-lorebook-load-page .loading-state { min-height: 96px; color: var(--text-secondary); }
.cast-lorebook-load-page .loading-spinner { color: var(--notif-reply); }
.cast-lorebook-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--text);
}
.cast-lorebook-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: inherit; line-height: 0; }
.cast-lorebook-mark svg { display: block; }
.cast-lorebook-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cast-lorebook-header h1 { min-width: 0; margin: 0; color: var(--text); font-size: 17px; font-weight: 750; text-align: center; }
.cast-lorebook-header > :last-child:not(h1):not(.cast-lorebook-close) { justify-self: end; }
.cast-lorebook-close,
.cast-lorebook-icon-btn,
.cast-lorebook-text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.cast-lorebook-close .cast-lorebook-mark svg { width: 20px; height: 20px; }
.cast-lorebook-close:hover, .cast-lorebook-icon-btn:hover, .cast-lorebook-text-btn:hover { background: var(--bg-hover); }
.cast-lorebook-register,
.cast-lorebook-secondary,
.cast-lorebook-add-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--cast-editor-primary-surface);
  border-radius: 11px;
  background: var(--cast-editor-primary-surface);
  color: var(--cast-editor-primary-text);
  font: inherit;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  gap: var(--s1);
}
.cast-lorebook-register:disabled, .cast-lorebook-secondary:disabled, .cast-lorebook-add-entry:disabled { opacity: .55; cursor: not-allowed; }
.cast-lorebook-tabs {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  min-height: 50px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  scrollbar-width: none;
}
.cast-lorebook-tabs::-webkit-scrollbar { display: none; }
.cast-lorebook-tabs button {
  position: relative;
  flex: 1 0 auto;
  min-width: 0;
  min-height: 50px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.cast-lorebook-tabs button.active { color: var(--text); }
.cast-lorebook-tabs button.active::after { position: absolute; right: 15%; bottom: 0; left: 15%; height: 3px; border-radius: 3px 3px 0 0; background: var(--cast-editor-blue); content: ""; }
.cast-lorebook-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 760px);
  margin-inline: auto;
  padding: 16px 18px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.cast-lorebook-footer {
  z-index: 1;
  flex: 0 0 auto;
  padding: 10px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 -4px 14px rgba(22, 38, 54, .05);
}
.cast-lorebook-footer .cast-lorebook-register { width: min(100%, 720px); min-height: 48px; margin: 0 auto; display: flex; }
.cast-lorebook-editor-footer .cast-lorebook-add-entry { width: min(100%, 720px); min-height: 46px; margin: 0 auto; display: flex; }
.cast-lorebook-screen.has-sticky-footer .cast-lorebook-scroll { padding-bottom: 32px; }
.cast-lorebook-picker-create { display: flex; justify-content: center; padding: 14px 0 4px; }
.cast-lorebook-note, .cast-lorebook-link-note, .cast-lorebook-muted, .cast-lorebook-editor-copy > p,
.cast-lorebook-unavailable, .cast-lorebook-success, .cast-lorebook-error { font-size: 13px; line-height: 1.6; }
.cast-lorebook-note, .cast-lorebook-link-note, .cast-lorebook-muted { color: var(--text-secondary); }
.cast-lorebook-link-note { padding: 10px 12px; border-radius: 10px; background: var(--bg-secondary); }
.cast-lorebook-success, .cast-lorebook-error, .cast-lorebook-unavailable { padding: 10px 12px; border-radius: 10px; }
.cast-lorebook-success { background: color-mix(in srgb, var(--success) 14%, var(--bg)); color: var(--success); }
.cast-lorebook-error { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); color: var(--danger); }
.cast-lorebook-unavailable { background: color-mix(in srgb, var(--oshi-star) 14%, var(--bg)); color: var(--text); }
.cast-lorebook-order { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--text-secondary); font-size: 12px; }
.cast-lorebook-order b { color: var(--text); }
.cast-lorebook-search { position: relative; margin: 0 0 13px; }
.cast-lorebook-search input, .cast-lorebook-editor-copy input:not([type="checkbox"]), .cast-lorebook-editor-copy textarea,
.cast-lorebook-trigger-test textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  outline: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.cast-lorebook-search input { padding-right: 82px; }
.cast-lorebook-search-submit, .cast-lorebook-search-clear { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); cursor: pointer; }
.cast-lorebook-search-submit { right: 42px; }
.cast-lorebook-search-clear { right: 7px; }
.cast-lorebook-search-submit:hover, .cast-lorebook-search-clear:hover { background: var(--bg-secondary); color: var(--text); }
.cast-lorebook-search-submit .cast-lorebook-mark, .cast-lorebook-search-clear .cast-lorebook-mark { display: inline-flex; }
.cast-lorebook-trigger-entry-action { margin-top: 18px; padding: 14px; border: 1px solid var(--border-card); border-radius: 14px; background: var(--bg-secondary); }
.cast-lorebook-trigger-entry-action .cast-lorebook-muted { margin: 8px 0 0; }
.cast-lorebook-search input:focus, .cast-lorebook-editor-copy input:focus, .cast-lorebook-editor-copy textarea:focus,
.cast-lorebook-trigger-test textarea:focus { border-color: var(--cast-editor-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cast-editor-blue) 18%, transparent); }
.cast-lorebook-choice {
  display: grid;
  grid-template-columns: 24px 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.cast-lorebook-choice:disabled { color: var(--text-soft); cursor: not-allowed; }
.cast-lorebook-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--border-card); border-radius: 50%; color: var(--cast-editor-primary-text); font-size: 13px; }
.cast-lorebook-check .cast-lorebook-mark { visibility: hidden; }
.cast-lorebook-choice.is-selected .cast-lorebook-check { border-color: var(--cast-editor-blue); background: var(--cast-editor-blue); }
.cast-lorebook-choice.is-selected .cast-lorebook-check .cast-lorebook-mark { visibility: visible; }
.cast-lorebook-choice-cover, .cast-lorebook-mini-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 7px;
  background-color: var(--bg-secondary);
  background-position: center;
  background-size: cover;
  box-shadow: 0 1px 5px rgba(27, 44, 60, .14);
  color: var(--text);
}
.cast-lorebook-choice-cover b, .cast-lorebook-mini-cover b { display: -webkit-box; padding: 4px; overflow: hidden; font-size: 8px; line-height: 1.25; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.cast-lorebook-choice-copy { display: grid; min-width: 0; gap: 3px; }
.cast-lorebook-choice-copy b { overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cast-lorebook-choice-copy > span { overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cast-lorebook-choice-copy small { color: var(--text-secondary); font-size: 11px; }
.cast-lorebook-unavailable-list { margin: 12px 0; }
.cast-lorebook-unavailable-list h2, .cast-lorebook-unavailable-list > p { color: var(--text-secondary); font-size: 12px; }
.cast-lorebook-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 12px; color: var(--text-secondary); text-align: center; }
.cast-lorebook-empty strong { color: var(--text); }
.cast-lorebook-empty p { margin: 0; font-size: 13px; }
.cast-lorebook-empty button, .cast-lorebook-primary-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 44px; padding: 0 15px; border: 1px solid var(--cast-editor-card-border); border-radius: 11px; background: var(--cast-editor-secondary-surface); color: var(--cast-editor-blue); font: inherit; font-weight: 700; cursor: pointer; }
.cast-lorebook-editor-copy { display: grid; gap: 13px; max-width: 720px; margin: 0 auto; }
.cast-lorebook-editor-copy h2, .cast-lorebook-entry-heading h3 { margin: 4px 0 0; color: var(--text); font-size: 17px; }
.cast-lorebook-editor-copy h3 { margin: 0; font-size: 15px; }
.cast-lorebook-editor-copy > p { margin: -7px 0 0; color: var(--text-secondary); }
.cast-lorebook-editor-copy label { display: grid; gap: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 650; }
.cast-lorebook-editor-copy textarea { min-height: 76px; resize: vertical; }
.cast-lorebook-cover-edit { position: relative; display: grid !important; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 13px !important; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-lorebook-cover-edit:focus-visible { outline: 2px solid var(--cast-editor-blue); outline-offset: 3px; }
.cast-lorebook-cover-preview { display: flex; align-items: center; justify-content: center; width: 78px; aspect-ratio: 3 / 4; border-radius: 9px; background: var(--bg-secondary); background-position: center; background-size: cover; box-shadow: 0 1px 7px rgba(27, 44, 60, .15); color: var(--text); }
.cast-lorebook-cover-preview b { padding: 6px; font-size: 10px; text-align: center; }
.cast-lorebook-cover-edit small, .cast-lorebook-switch small, .cast-lorebook-muted { display: block; margin-top: 3px; color: var(--text-soft); font-size: 12px; font-weight: 400; }
.cast-lorebook-count { display: block; margin: -10px 2px 0; color: var(--text-soft); font-size: 11px; text-align: right; }
.cast-lorebook-entry-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--border); }
.cast-lorebook-entry-heading p { margin: 4px 0 0; color: var(--text-soft); font-size: 12px; }
.cast-lorebook-entry-heading > span { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.cast-lorebook-entries { display: grid; gap: 9px; }
.cast-lorebook-entry { overflow: hidden; border: 1px solid var(--border-card); border-radius: 11px; background: var(--bg-secondary); }
.cast-lorebook-entry > header { display: flex; align-items: center; gap: 3px; min-height: 49px; padding: 4px 7px; }
.cast-lorebook-entry-toggle { display: flex; flex: 1 1 auto; align-items: center; gap: var(--s2); min-width: 0; min-height: 40px; padding: 0 5px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.cast-lorebook-entry-toggle .cast-lorebook-mark { transition: transform .16s ease; }
.cast-lorebook-entry-toggle[aria-expanded="true"] .cast-lorebook-mark-chevronDown { transform: rotate(180deg); }
.cast-lorebook-entry-toggle .cast-lorebook-mark svg { width: 16px; height: 16px; }
.cast-lorebook-entry-toggle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-lorebook-entry-toggle small { margin-left: auto; color: var(--text-soft); white-space: nowrap; }
.cast-lorebook-icon-btn { min-width: 32px; min-height: 34px; }
.cast-lorebook-icon-btn .cast-lorebook-mark svg { width: 16px; height: 16px; }
.cast-lorebook-icon-btn.is-danger { color: var(--danger); }
.cast-lorebook-entry-fields { display: grid; gap: 11px; padding: 10px 12px 14px; border-top: 1px solid var(--border); }
.cast-lorebook-entry-fields > label > small { color: var(--text-soft); font-size: 11px; text-align: right; }
.cast-lorebook-tip { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.cast-lorebook-add-entry { width: 100%; border-color: var(--cast-editor-card-border); background: var(--cast-editor-secondary-surface); color: var(--cast-editor-blue); }
.cast-lorebook-cast-list { display: grid; gap: 7px; }
.cast-lorebook-cast-load-more { display: grid; justify-items: start; gap: 7px; margin-top: 7px; }
.cast-lorebook-cast-load-more > p { margin: 0; }
.cast-lorebook-cast-list label, .cast-lorebook-switch { display: flex !important; align-items: center; gap: 11px !important; padding: 12px; border: 1px solid var(--border-card); border-radius: 10px; background: var(--bg-secondary); color: var(--text); }
.cast-lorebook-cast-list input, .cast-lorebook-switch input { width: 19px; height: 19px; accent-color: var(--cast-editor-blue); }
.cast-lorebook-cast-list span, .cast-lorebook-switch span { display: block; }
.cast-lorebook-library-card { display: grid; grid-template-columns: minmax(92px, 130px) minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cast-lorebook-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; padding: 8px; border: 1px solid var(--border-card); border-radius: 9px; background-color: var(--bg-secondary); background-position: center; background-size: cover; box-shadow: 0 1px 7px rgba(27, 44, 60, .15); color: var(--text); font: inherit; font-size: 17px; font-weight: 750; text-align: center; }
.cast-lorebook-library-info { display: grid; align-content: center; gap: 7px; }
.cast-lorebook-library-info h2, .cast-lorebook-library-info p { margin: 0; }
.cast-lorebook-library-info h2 { font-size: 16px; }
.cast-lorebook-library-info p, .cast-lorebook-library-info small { color: var(--text-secondary); font-size: 12px; }
.cast-lorebook-library-info button { justify-self: start; min-height: 36px; padding: 0 13px; border: 1px solid var(--cast-editor-card-border); border-radius: 9px; background: var(--cast-editor-secondary-surface); color: var(--cast-editor-blue); font: inherit; }
.cast-lorebook-deleting { padding: 10px; border-radius: 9px; background: color-mix(in srgb, var(--oshi-star) 14%, var(--bg)); color: var(--text); font-size: 12px; }
.cast-lorebook-result-checking, .cast-lorebook-conflict { margin: 0 0 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--oshi-star) 28%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--oshi-star) 10%, var(--bg)); color: var(--text); font-size: 13px; }
.cast-lorebook-result-checking p, .cast-lorebook-conflict p { margin: 5px 0 8px; }
.cast-lorebook-latest { margin: 10px 0; padding: 10px; border-radius: 9px; background: var(--bg-secondary); color: var(--text); }
.cast-lorebook-latest summary { cursor: pointer; font-weight: 700; }
.cast-lorebook-latest article { padding: 8px 0; border-top: 1px solid var(--border); }
.cast-lorebook-latest article small { display: block; color: var(--text-secondary); }
.cast-lorebook-latest article p { margin: 4px 0; white-space: pre-wrap; }
.cast-lorebook-secondary { min-height: 40px; border-color: var(--cast-editor-card-border); background: var(--cast-editor-secondary-surface); color: var(--cast-editor-blue); }
.cast-lorebook-secondary.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
.cast-lorebook-trigger-test { display: grid; align-content: start; gap: 13px; }
.cast-lorebook-trigger-results { display: grid; gap: 8px; padding-left: 23px; }
.cast-lorebook-trigger-results li { display: grid; gap: 4px; padding: 10px; border-radius: 9px; background: var(--bg-secondary); color: var(--text); font-size: 13px; }
.cast-lorebook-trigger-results small { color: var(--text-secondary); }
.cast-lorebook-trigger-preview { margin: 4px 0 0; padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cast-lorebook-choice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); }
.cast-lorebook-choice-row .cast-lorebook-choice { border-bottom: 0; }
.cast-lorebook-public-open, .cast-detail-lorebook-open { min-height: 34px; padding: 0 10px; border: 1px solid var(--cast-editor-card-border); border-radius: 9px; background: var(--cast-editor-secondary-surface); color: var(--cast-editor-blue); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.cast-lorebook-public-page { width: min(100%, 820px); padding-top: 14px; }
.cast-lorebook-public-heading { display: grid; grid-template-columns: minmax(110px, 175px) minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 0 18px; }
.cast-lorebook-public-cover { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; object-fit: cover; background: var(--bg-secondary); box-shadow: 0 1px 8px rgba(27, 44, 60, .15); }
.cast-lorebook-public-cover.is-empty { display: flex; align-items: center; justify-content: center; color: var(--text); }
.cast-lorebook-public-cover.is-empty b { max-width: 85%; padding: 12px; font-size: clamp(18px, 4.8vw, 27px); line-height: 1.3; text-align: center; }
.cast-lorebook-public-heading h2 { margin: 0 0 8px; color: var(--text); font-size: 21px; line-height: 1.3; }
.cast-lorebook-public-heading p { margin: 0 0 9px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.cast-lorebook-public-heading small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.cast-lorebook-public-entries { display: grid; gap: 10px; padding-top: 4px; }
.cast-lorebook-public-entries article { padding: 14px; border: 1px solid var(--border-card); border-radius: 11px; background: var(--bg-secondary); color: var(--text); }
.cast-lorebook-public-entries h3 { margin: 0 0 7px; color: var(--text); font-size: 16px; }
.cast-lorebook-public-keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.cast-lorebook-public-keywords span { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--notif-reply) 12%, var(--bg)); color: var(--text-secondary); font-size: 11px; }
.cast-lorebook-public-entries p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.cast-lorebook-public-casts { display: grid; gap: 8px; padding-top: 8px; }
.cast-lorebook-public-casts article { display: flex; align-items: center; gap: 11px; padding: 9px; border-bottom: 1px solid var(--border); color: var(--text); }
.cast-lorebook-public-casts img, .cast-lorebook-public-cast-avatar { display: flex; width: 52px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); object-fit: cover; font-size: 18px; }
.cast-lorebook-public-casts span:last-child { display: grid; gap: 4px; }
.cast-lorebook-public-casts small { color: var(--text-secondary); font-size: 12px; }
.cast-detail-lorebook-open { margin-top: 8px; }
.cast-lorebook-create-panel { display: grid; gap: 12px; padding: 2px 0 12px; }
.cast-lorebook-create-panel h2, .cast-lorebook-create-panel h3, .cast-lorebook-create-panel p { margin: 0; }
.cast-lorebook-create-panel h2 { font-size: 17px; }
.cast-lorebook-create-panel h3 { display: flex; justify-content: space-between; font-size: 14px; }
.cast-lorebook-create-panel h3 button { display: inline-flex; align-items: center; gap: var(--s1); border: 0; background: transparent; color: var(--cast-editor-blue); font: inherit; }
.cast-lorebook-create-panel > p { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.cast-lorebook-create-selected, .cast-lorebook-mini-recommend { display: grid; gap: 7px; }
.cast-lorebook-create-book { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-secondary); color: var(--text); font-size: 13px; }
.cast-lorebook-create-book-cover { display: flex; align-items: center; justify-content: center; width: 42px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--bg); background-position: center; background-size: cover; box-shadow: 0 1px 5px rgba(27, 44, 60, .14); color: var(--text); }
.cast-lorebook-create-book-cover b { display: -webkit-box; padding: 4px; overflow: hidden; font-size: 8px; line-height: 1.25; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.cast-lorebook-create-book-title { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cast-lorebook-create-book > span:last-child { color: var(--text-secondary); white-space: nowrap; }
.cast-lorebook-create-empty { color: var(--text-secondary); font-size: 12px; }
.cast-lorebook-mini-book { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid var(--border-card); border-radius: 9px; background: var(--bg-secondary); color: var(--text); text-align: left; }
.cast-lorebook-mini-cover { width: 42px; }
.cast-lorebook-mini-book > span:last-child { display: grid; gap: 4px; }
.cast-lorebook-mini-book small { color: var(--text-soft); font-size: 11px; }
.cast-lorebook-showcase .cast-showcase-center-wrap { max-width: 100%; }
.cast-lorebook-showcase .cast-showcase-card { background: var(--cast-bg, var(--bg)); }
.cast-lorebook-showcase .cast-lorebook-cover-card { aspect-ratio: 3 / 4; height: auto; background-color: var(--cast-bg, var(--bg-secondary)); background-position: center; background-size: cover; }
.cast-lorebook-showcase .cast-lorebook-cover-card.is-empty { display: flex; align-items: center; justify-content: center; background: var(--cast-bg, var(--bg-secondary)); color: var(--cast-ink, var(--text)); }
.cast-lorebook-showcase .cast-lorebook-cover-card.is-empty b { max-width: 85%; padding: 12px; font-size: clamp(18px, 4.8vw, 27px); line-height: 1.3; text-align: center; }
.cast-lorebook-showcase .cast-lorebook-cover-card.is-empty + .cast-showcase-card-caption { background: var(--cast-bg, var(--bg)); }
.cast-lorebook-showcase .cast-lorebook-cover-card.is-empty + .cast-showcase-card-caption .cast-showcase-card-name { color: var(--cast-ink, var(--text)); text-shadow: none; }
.cast-lorebook-showcase .cast-lorebook-cover-card.is-empty + .cast-showcase-card-caption .cast-showcase-card-meta { color: var(--cast-sub, var(--text-secondary)); }
.cast-lorebook-showcase .cast-showcase-card-add { background: var(--cast-bg, var(--bg)); }
.cast-lorebook-error-inline { margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 12%, var(--bg)); color: var(--danger); font-size: 12px; line-height: 1.5; }
@media (min-width: 701px) {
  .cast-lorebook-screen { max-width: 100%; }
  .cast-lorebook-library-card { grid-template-columns: 112px minmax(0, 1fr); }
  .cast-lorebook-choice { grid-template-columns: 26px 62px minmax(0, 1fr); min-height: 94px; }
  .cast-lorebook-choice-cover { width: 62px; }
}
@media (max-width: 430px) {
  .cast-lorebook-header { min-height: 54px; padding-inline: 10px; }
  .cast-lorebook-scroll { padding: 12px 13px 18px; }
  .cast-lorebook-choice { grid-template-columns: 22px 48px minmax(0, 1fr); gap: 8px; }
  .cast-lorebook-choice-cover { width: 48px; }
  .cast-lorebook-footer { padding-inline: 13px; }
  .cast-lorebook-entry-toggle small { font-size: 10px; }
  .cast-lorebook-choice-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 7px; }
  .cast-lorebook-public-open { justify-self: end; min-height: 32px; margin: 0 2px; }
  .cast-lorebook-public-heading { grid-template-columns: 106px minmax(0, 1fr); gap: 12px; }
  .cast-lorebook-public-heading h2 { font-size: 18px; }
}
@media (max-width: 720px) {
  .inquiries-admin { padding: 14px 12px 32px; }
  .inquiries-heading-row { align-items: center; }
  .inquiries-subtitle { font-size: .9rem; }
  .inquiries-toolbar { display: grid; gap: 8px; }
  .inquiries-search { max-width: none; }
  .inquiries-layout { display: block; min-height: 0; border-left: 0; border-right: 0; }
  .inquiries-list-pane { border-right: 0; }
  .admin-inquiries-view[data-inquiry-selected="false"] .inquiries-detail,
  .admin-inquiries-view[data-inquiry-selected="false"] .inquiries-detail-placeholder { display: none; }
  .admin-inquiries-view[data-inquiry-selected="true"] .inquiries-list-pane,
  .admin-inquiries-view[data-inquiry-selected="true"] .inquiries-detail-placeholder { display: none; }
  .admin-inquiries-view[data-inquiry-selected="true"] .inquiries-detail { display: block; }
  .inquiries-detail { min-height: 560px; }
  .inquiries-detail-placeholder { min-height: 260px; }
  .inquiries-mobile-back { display: inline-flex; align-items: center; min-height: 48px; }
  .inquiries-messages { max-height: none; min-height: 320px; }
  .inquiry-message { max-width: 94%; }
}

/* Cast timeline participation inside the existing cast showcase. */
.cast-timeline-empty-link {
  display: block;
  margin-top: var(--s1);
  color: var(--post-topic-color);
  font-size: .875rem;
  text-decoration: none;
}
.toast.cast-timeline-status-toast {
  display: flex;
  width: calc(100vw - var(--s5));
  max-width: 430px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--cast-timeline-feedback-border);
  border-radius: var(--cast-timeline-feedback-radius);
  background: var(--cast-timeline-feedback-surface);
  color: var(--cast-timeline-feedback-ink);
  font-size: 1rem;
  text-align: left;
  box-shadow: none;
}
.cast-timeline-status-toast > span { flex: 1 1 auto; }
.cast-timeline-status-toast button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cast-timeline-feedback-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--s1);
}

/* The action and participation rows keep fixed slots while the carousel changes slides. */
.cast-timeline-active-control[aria-hidden="true"] { visibility: hidden; }
.cast-timeline-active-control {
  min-width: 0;
  color: var(--cast-timeline-control-t1);
}
.cast-showcase-actions.has-cast-timeline-control {
  --cast-timeline-control-t1: var(--cast-ink);
  --cast-timeline-control-t3: var(--cast-faint);
  --cast-timeline-control-s2: #ededed;
  --cast-timeline-control-on: #3d8bff;
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "links" "control";
}
:root[data-theme="dark"] #cast-mine-view .cast-showcase-actions.has-cast-timeline-control {
  --cast-timeline-control-s2: #1a1a1d;
}
#cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) .cast-showcase-empty-after-add {
  box-sizing: border-box;
  height: var(--s4);
  min-height: var(--s4);
  overflow: hidden;
  padding: 0;
}
#cast-mine-view .cast-showcase-section:has(.cast-showcase-actions.has-cast-timeline-control) :is(.cast-showcase-dots, .cast-showcase-counter) {
  box-sizing: border-box;
  height: var(--s4);
  min-height: var(--s4);
}
.cast-timeline-active-control { grid-area: control; width: 100%; }
.cast-timeline-control-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  white-space: nowrap;
}
.cast-timeline-label-group {
  display: inline-flex;
  min-width: 0;
  min-height: var(--s5);
  align-items: center;
  gap: var(--s1);
}
.cast-timeline-help {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cast-timeline-control-t3);
  cursor: pointer;
}
.cast-timeline-help svg { display: block; width: 18px; height: 18px; }
.cast-timeline-help:focus-visible { outline: 2px solid var(--cast-timeline-control-on); outline-offset: 2px; }
.cast-timeline-control-trailing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s2);
}
.cast-timeline-label,
.cast-timeline-state,
.cast-timeline-private {
  color: var(--cast-timeline-control-t1);
  font-size: .8125rem;
  font-weight: 500;
}
.cast-timeline-state,
.cast-timeline-private {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cast-timeline-control-t3);
  font: inherit;
  font-size: .75rem;
  white-space: nowrap;
  cursor: pointer;
}
.cast-timeline-switch-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cast-timeline-switch-label input:disabled + .settings-toggle { opacity: .45; }
.cast-timeline-switch-label .settings-toggle { background: var(--cast-timeline-control-s2); }
.cast-timeline-switch-label input:checked + .settings-toggle { background: var(--cast-timeline-control-on); }
.cast-showcase-action-links {
  grid-area: links;
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  gap: var(--s2);
}
.cast-showcase-actions.has-cast-timeline-control .cast-showcase-edit-button,
.cast-showcase-actions.has-cast-timeline-control .cast-showcase-summon-btn {
  position: static;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  justify-content: center;
  transform: none;
}
.cast-showcase-actions.has-cast-timeline-control .cast-showcase-edit-button .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.cast-showcase-actions.has-cast-timeline-control .cast-showcase-edit-button {
  text-decoration: none;
}

/* The cast timeline help uses the existing repost-picker sheet and its history/close behavior. */
#repost-picker-section.cast-timeline-explain-sheet {
  box-sizing: border-box;
  padding: 0 var(--s3) max(var(--s3), var(--safe-area-bottom, 0px));
  max-height: calc(100dvh - var(--s3));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1);
  clip-path: inset(0 16px 0 round 24px 24px 0 0);
}
#repost-picker-section.cast-timeline-explain-sheet::-webkit-scrollbar { display: none; }
#repost-picker-section.cast-timeline-explain-sheet::before {
  content: none;
}
#repost-picker-section.cast-timeline-explain-sheet .repost-picker-sheet-handle {
  margin: var(--s2) auto var(--s1);
}
#repost-picker-section .cast-timeline-explain-body {
  gap: 0;
  padding: 0 var(--s4) var(--s3);
}
.cast-timeline-explain-heading { padding: var(--s2) 0 var(--s3); }
.cast-timeline-explain-heading h2 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 21px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cast-timeline-explain-sections { display: grid; gap: var(--s2); }
.cast-timeline-explain-item h3 {
  margin: 0 0 var(--s1);
  color: var(--text);
  font-size: 14px;
  line-height: 18px;
  font-weight: 650;
}
.cast-timeline-explain-item p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.cast-timeline-explain-primary {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: var(--s3);
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--s2);
  background: #3d8bff;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-height: 600px) {
  #repost-picker-section.cast-timeline-explain-sheet {
    padding: 0 var(--s2) max(var(--s2), var(--safe-area-bottom, 0px));
    max-height: calc(100dvh - var(--s2));
  }
  #repost-picker-section.cast-timeline-explain-sheet .repost-picker-sheet-handle { margin: var(--s1) auto; }
  #repost-picker-section .cast-timeline-explain-body { padding: 0 var(--s3) var(--s2); }
  .cast-timeline-explain-heading { padding: var(--s1) 0 var(--s2); }
  .cast-timeline-explain-sections { gap: var(--s1); }
  .cast-timeline-explain-item p { line-height: 16px; }
  .cast-timeline-explain-primary { min-height: 44px; margin-top: var(--s2); }
}

/* Author affinity settings share the cast editor's dark surface, blue accent, and spacing scale. */
#cast-create-view .cast-affinity-panel {
  display: grid;
  gap: var(--cast-editor-space-lg);
}
#cast-create-view .cast-affinity-empty,
#cast-create-view .cast-affinity-inherit {
  display: grid;
  gap: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-lg);
}
#cast-create-view .cast-affinity-shared-note,
#cast-create-view .cast-affinity-tone-note {
  margin: 0;
  color: var(--cast-editor-secondary-text);
  font-size: 13px;
  line-height: 1.55;
}
#cast-create-view .cast-affinity-tone-note {
  margin: var(--cast-editor-space-sm) 0 var(--cast-editor-space-md);
}
#cast-create-view .cast-affinity-inactive-note {
  display: flex;
  align-items: flex-start;
  gap: var(--cast-editor-space-sm);
  margin: 0;
  padding: var(--cast-editor-space-md);
  border: 1px solid color-mix(in srgb, var(--cast-editor-blue) 35%, transparent);
  border-radius: 12px;
  color: var(--cast-editor-secondary-text);
  background: color-mix(in srgb, var(--cast-editor-blue) 8%, var(--cast-editor-card-surface));
}
#cast-create-view .cast-affinity-inactive-note .cast-icon {
  flex: 0 0 auto;
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-affinity-character-choices {
  display: flex;
  gap: var(--cast-editor-space-sm);
  overflow-x: auto;
  padding: 0 0 var(--cast-editor-space-xs);
}
#cast-create-view .cast-affinity-character-choice {
  display: grid;
  flex: 0 0 auto;
  gap: var(--cast-editor-space-xs);
  min-width: 112px;
  text-align: left;
}
#cast-create-view .cast-affinity-character-choice small {
  color: var(--cast-editor-secondary-text);
  font-size: 11px;
}
#cast-create-view .cast-affinity-character-choice.is-selected {
  border-color: var(--cast-editor-blue);
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-affinity-selected-head,
#cast-create-view .cast-affinity-stage-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cast-editor-space-sm);
}
#cast-create-view .cast-affinity-selected-head h2,
#cast-create-view .cast-affinity-stage-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}
#cast-create-view .cast-affinity-selected-head span {
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
}
#cast-create-view .cast-affinity-editor,
#cast-create-view .cast-affinity-config-grid,
#cast-create-view .cast-affinity-stage-list {
  display: grid;
  gap: var(--cast-editor-space-md);
}
#cast-create-view .cast-affinity-config-grid {
  padding: var(--cast-editor-space-lg);
  border: 1px solid var(--cast-editor-card-border);
  border-radius: 16px;
  background: var(--cast-editor-card-surface);
}
#cast-create-view .cast-affinity-range-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cast-editor-space-md);
}
#cast-create-view .cast-affinity-field {
  display: grid;
  gap: var(--cast-editor-space-xs);
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
#cast-create-view .cast-affinity-display-toggle {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-sm);
  color: var(--text);
  font-size: 13px;
}
#cast-create-view .cast-affinity-stage-card {
  display: block;
  overflow: hidden;
  padding: 0;
}
#cast-create-view .cast-affinity-stage-row {
  display: block;
  min-width: 0;
  padding: var(--cast-editor-space-sm);
}
#cast-create-view .cast-affinity-stage-toggle {
  display: flex;
  align-items: center;
  gap: var(--cast-editor-space-xs);
  min-width: 0;
  padding: var(--cast-editor-space-xs);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
#cast-create-view .cast-affinity-stage-title {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
#cast-create-view .cast-affinity-stage-range {
  flex: 0 0 auto;
  padding: 2px var(--cast-editor-space-xs);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cast-editor-blue) 12%, var(--cast-editor-card-surface));
  color: var(--cast-editor-blue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#cast-create-view .cast-affinity-stage-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cast-create-view .cast-affinity-stage-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--cast-editor-secondary-text);
  transition: transform .16s ease;
}
#cast-create-view .cast-affinity-stage-card.is-open .cast-affinity-stage-chevron {
  transform: rotate(180deg);
}
#cast-create-view .cast-affinity-stage-delete {
  justify-self: start;
  gap: var(--cast-editor-space-xs);
  color: var(--cast-editor-secondary-text);
}
#cast-create-view .cast-affinity-stage-delete:hover {
  color: var(--danger);
}
#cast-create-view .cast-affinity-stage-delete:active {
  color: var(--danger);
}
#cast-create-view .cast-affinity-stage-editor {
  display: grid;
  gap: var(--cast-editor-space-md);
  padding: var(--cast-editor-space-md);
  border-top: 1px solid var(--cast-editor-card-border);
}
#cast-create-view .cast-affinity-stage-editor[hidden] {
  display: none;
}
#cast-create-view .cast-affinity-stage-start {
  display: grid;
  grid-template-columns: auto minmax(84px, 112px);
  align-items: center;
  gap: var(--cast-editor-space-sm);
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
}
#cast-create-view .cast-affinity-stage-start input {
  width: 100%;
}
#cast-create-view .cast-affinity-stage-start small {
  grid-column: 1 / -1;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
}
#cast-create-view .cast-affinity-stage-start small[hidden] {
  display: none;
}
#cast-create-view .cast-affinity-stage-start input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent);
}
#cast-create-view .cast-affinity-stage-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cast-editor-space-md);
}
#cast-create-view .cast-affinity-counter {
  justify-self: end;
  margin: 0;
  color: var(--cast-editor-secondary-text);
  font-size: 12px;
}
#cast-create-view .cast-affinity-counter.is-near-limit {
  color: var(--cast-editor-blue);
}
#cast-create-view .cast-affinity-reset,
#cast-create-view .cast-affinity-delete {
  justify-self: start;
  color: var(--cast-editor-secondary-text);
}
@media (max-width: 520px) {
  #cast-create-view .cast-affinity-stage-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  #cast-create-view .cast-affinity-range-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Chat affinity (PR4). These spacing steps follow the cast mock; no row is mounted when the
   server has no display-safe AFFINITY state, so non-target chats keep their original grid. */
.cast-chat-widget-root {
  --cast-affinity-space-5: 5px;
  --cast-affinity-space-8: 8px;
  --cast-affinity-space-13: 13px;
  --cast-affinity-space-21: 21px;
  --cast-affinity-space-34: 34px;
  --cast-affinity-space-55: 55px;
  --cast-affinity-blue: #78a3ff;
  --cast-affinity-blue-strong: #4f83ef;
}

.zeta-chat-shell:has(> .cast-affinity-header) {
  grid-template-rows: 56px auto minmax(0, 1fr) auto;
}

.zeta-chat-shell:has(> .cast-affinity-header):has(> .zeta-chat-room-notice),
.zeta-chat-shell:has(> .cast-affinity-header):has(> .cast-chat-readonly-banner:not([hidden])) {
  grid-template-rows: 56px auto auto minmax(0, 1fr) auto;
}

.cast-affinity-header {
  display: flex;
  align-items: stretch;
  gap: var(--cast-affinity-space-8);
  min-width: 0;
  max-width: 100%;
  padding: var(--cast-affinity-space-8) var(--cast-affinity-space-13);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--cast-affinity-blue) 4%);
  z-index: 4;
}

.cast-affinity-header::-webkit-scrollbar { display: none; }
.csx-mode-active .cast-affinity-header { display: none; }

.cast-affinity-chip {
  --cast-affinity-progress: 0%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 3px;
  align-items: center;
  column-gap: var(--cast-affinity-space-8);
  row-gap: var(--cast-affinity-space-5);
  flex: 0 0 auto;
  min-width: min(180px, 68vw);
  max-width: 230px;
  padding: var(--cast-affinity-space-5) var(--cast-affinity-space-8);
  color: var(--text);
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--cast-affinity-blue) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 92%, var(--cast-affinity-blue) 8%);
  cursor: pointer;
}

.cast-affinity-chip:hover,
.cast-affinity-chip:focus-visible {
  border-color: color-mix(in srgb, var(--cast-affinity-blue) 70%, var(--border));
  outline: none;
}

.cast-affinity-chip-avatar {
  grid-row: 1 / 3;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cast-affinity-blue) 34%, var(--border));
  border-radius: 50%;
  color: var(--cast-affinity-blue);
  background: color-mix(in srgb, var(--bg) 80%, var(--cast-affinity-blue) 20%);
}

.cast-affinity-chip-avatar svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.cast-affinity-chip-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cast-affinity-chip-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cast-affinity-space-5);
  min-width: 0;
}

.cast-affinity-chip-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-affinity-chip-value {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cast-affinity-chip-meter {
  grid-column: 2;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 17%, transparent);
}

.cast-affinity-chip-meter > span {
  display: block;
  width: var(--cast-affinity-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cast-affinity-blue), var(--cast-affinity-blue-strong));
  transition: width 180ms ease-out;
}

.cast-affinity-reply-changes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cast-affinity-space-5) var(--cast-affinity-space-8);
  margin: var(--cast-affinity-space-8) 0 0 var(--cast-affinity-space-8);
  color: color-mix(in srgb, var(--cast-affinity-blue) 80%, var(--text));
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.cast-chat-widget-root .zeta-chat-message-assistant:has(> .cast-affinity-reply-changes) {
  flex-direction: column;
  align-items: flex-start;
}

.cast-affinity-reply-change {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 var(--cast-affinity-space-8);
  border: 1px solid color-mix(in srgb, var(--cast-affinity-blue) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cast-affinity-blue) 8%, var(--bg));
}

.cast-affinity-detail {
  display: grid;
  gap: var(--cast-affinity-space-8);
  padding: var(--cast-affinity-space-8) 0 var(--cast-affinity-space-21);
}

.cast-affinity-detail-stage,
.cast-affinity-detail-value,
.cast-affinity-detail-next {
  margin: 0;
  text-align: center;
}

.cast-affinity-detail-stage {
  color: var(--cast-affinity-blue);
  font-size: 14px;
  font-weight: 700;
}

.cast-affinity-detail-value {
  color: var(--text);
  font-size: 34px;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cast-affinity-detail-value span {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}

.cast-affinity-detail-next {
  color: var(--text-secondary);
  font-size: 12px;
}

.cast-affinity-stage-list {
  display: grid;
  gap: var(--cast-affinity-space-5);
  margin: var(--cast-affinity-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.cast-affinity-stage-item {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cast-affinity-space-8);
  min-height: 42px;
  padding: var(--cast-affinity-space-8) var(--cast-affinity-space-13);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-secondary);
}

.cast-affinity-stage-item.is-reached {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cast-affinity-blue) 28%, var(--border));
}

.cast-affinity-stage-item.is-current {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cast-affinity-blue) 68%, var(--border));
  background: color-mix(in srgb, var(--bg-secondary) 86%, var(--cast-affinity-blue) 14%);
}

.cast-affinity-stage-mark {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: var(--cast-affinity-blue);
}

.cast-affinity-stage-name { font-size: 13px; font-weight: 650; }
.cast-affinity-stage-threshold { color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
.cast-affinity-header { justify-content: flex-start; padding-inline: var(--cast-affinity-space-21); }
.cast-affinity-chip { min-width: 190px; }
}

/* 夜の劇場: C1は写真を大きく見せ、テーマ地色の半透明フェードを文字の後ろへ置く。 */
#cast-home-view,
#cast-search-view {
  /* 画像全体を見せたまま、文字の後ろだけを面ではなく半透明のフェードで暗くする。 */
  --cast-image-fade: linear-gradient(
    180deg,
    transparent 52%,
    color-mix(in srgb, var(--cast-bg) 20%, transparent) 76%,
    color-mix(in srgb, var(--cast-bg) 82%, transparent) 100%
  );
}

#cast-search-view {
  min-height: 100dvh;
  background: var(--cast-bg);
}

#cast-home-view .cast-header-bar {
  min-height: var(--s6);
  padding-inline: var(--s4);
  border-bottom: 0;
}

#cast-home-view .cast-home-page-title {
  margin: 0;
  color: var(--cast-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

#cast-home-view .cast-header-avatar-btn {
  display: flex;
}

#cast-home-view .cast-home-page-title button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

#cast-home-view .cast-header-tabs {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--s3);
  margin-left: var(--s3);
  margin-right: auto;
}

#cast-home-view .cast-header-tab-btn {
  padding: 4px 0;
  color: var(--cast-sub);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

#cast-home-view .cast-header-tab-btn.is-active {
  color: var(--cast-ink);
}

#cast-home-view .cast-header-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s2);
  padding-right: 0;
}

#cast-home-view .cast-header-right > .cast-header-icon-btn:not(.cast-header-search-btn) {
  display: none;
}

#cast-home-view .cast-header-z-btn {
  position: static;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

#cast-home-view .cast-home-search-entry {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: calc(100% - var(--s4) * 2);
  height: 34px;
  margin: var(--s3) var(--s4) var(--s3);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cast-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--cast-faint);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#cast-home-view .cast-home-search-entry svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cast-home-view .cast-home-ranking-section,
#cast-home-view .cast-home-tags-section {
  margin: 0 0 var(--s3);
}

#cast-home-view .cast-home-section-heading,
#cast-home-view .cast-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 var(--s4) var(--s3);
}

#cast-home-view .cast-home-section-title {
  margin: 0;
  color: var(--cast-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

#cast-home-view .cast-home-section-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}

#cast-home-view .cast-home-section-kicker {
  color: var(--cast-faint);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#cast-home-view .cast-home-section-link,
#cast-home-view .cast-order-select {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s4);
  padding: 0;
  border: 0;
  border-radius: var(--s2);
  background: transparent;
  color: var(--cast-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#cast-home-view .cast-order-select-caret {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cast-home-view .cast-ranking-preview-track {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  padding: 0 var(--s4) var(--s1);
  scroll-padding-inline: var(--s4);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#cast-home-view .cast-ranking-preview-track::-webkit-scrollbar,
#cast-home-view .cast-home-tags-track::-webkit-scrollbar {
  display: none;
}

#cast-home-view .cast-ranking-preview-track > .cast-character-card {
  flex: 0 0 118px;
  width: 118px;
  scroll-snap-align: start;
}

#cast-home-view .cast-home-tags-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s3);
  overflow-x: auto;
  padding: 0 var(--s4);
  scrollbar-width: none;
}

#cast-home-view .cast-home-tags-section > .cast-home-section-title {
  margin: 0 var(--s4) var(--s3);
}

#cast-home-view .cast-home-tag,
#cast-home-view .cast-home-tag-hash,
#cast-home-view .cast-search-words .cast-tag-pill,
#cast-search-view .cast-search-words .cast-tag-pill,
#cast-search-view .cast-search-filter .cast-tag-pill {
  flex: 0 0 auto;
  min-height: var(--s4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-sub);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

#cast-home-view .cast-public-section {
  padding: 0 0 var(--s6);
}

#cast-home-view .cast-public-section .cast-section-head {
  margin: 0 var(--s4) var(--s3);
}

#cast-home-view .cast-public-section .cast-section-head .cast-home-section-title {
  font-size: 17px;
}

#cast-home-view .cast-public-section .cast-character-grid,
#cast-search-view .cast-character-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  padding: 0 var(--s4);
}

:is(#cast-home-view, #cast-search-view) .cast-character-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cast-hairline);
  border-radius: var(--s3);
  background: transparent;
}

:is(#cast-home-view, #cast-search-view) .cast-character-card-detail {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--s3);
}

:is(#cast-home-view, #cast-search-view) .cast-character-card-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--s3);
  background: var(--cast-bg);
}

:is(#cast-home-view, #cast-search-view) .cast-character-card-scrim {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--cast-image-fade);
  pointer-events: none;
}

:is(#cast-home-view, #cast-search-view) .cast-character-badges {
  top: var(--s2);
  left: var(--s2);
  right: var(--s2);
  gap: var(--s1);
}

:is(#cast-home-view, #cast-search-view) .cast-character-badges .cast-character-badge:not(.cast-character-badge-talk) {
  display: none;
}

:is(#cast-home-view, #cast-search-view) .cast-character-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

:is(#cast-home-view, #cast-search-view) .cast-character-badge-talk {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

:is(#cast-home-view, #cast-search-view) .cast-character-badge-talk svg,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-talk .icon {
  width: 13px;
  height: 13px;
  fill: none;
}

:is(#cast-home-view, #cast-search-view) .cast-character-badge-story,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-multi,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-chat,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-new,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-official,
:is(#cast-home-view, #cast-search-view) .cast-character-badge-private {
  border: 0;
  background: transparent;
  color: #fff;
}

:is(#cast-home-view, #cast-search-view) .cast-character-card-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  gap: var(--s1);
  padding: var(--s5) var(--s2) var(--s2);
  background: transparent;
  color: var(--cast-ink);
  pointer-events: none;
}

:is(#cast-home-view, #cast-search-view) .cast-character-name {
  overflow: hidden;
  color: var(--cast-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#cast-home-view, #cast-search-view) .cast-character-tagline,
:is(#cast-home-view, #cast-search-view) .cast-character-hook {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--cast-sub);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

:is(#cast-home-view, #cast-search-view) .cast-character-rank-label {
  color: var(--cast-ink);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#cast-home-view .cast-ranking-preview-track .cast-character-rank-label {
  font-size: 16px;
}

:is(#cast-home-view, #cast-search-view) .cast-character-card-footer {
  display: none;
}

#cast-search-view .cast-search-header {
  gap: var(--s2);
  padding: 0 var(--s4);
  border-bottom: 0;
}

#cast-search-view .cast-search-input {
  height: 34px;
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--cast-hairline);
  border-radius: 0;
  background: transparent;
}

#cast-search-view .cast-search-section {
  padding: var(--s3) var(--s4) 0;
}

#cast-search-view .cast-search-section-title {
  margin-bottom: var(--s3);
  font-size: 15px;
}

#cast-search-view .cast-search-words {
  gap: var(--s2) var(--s3);
}

#cast-search-view .cast-search-words .cast-tag-pill {
  min-height: var(--s4);
}

:root[data-theme="dark"] body.cast-tabbar-active .cast-bnav-item.active {
  color: #3d8bff;
}

.cast-bottom-nav {
  height: calc(var(--s6) + var(--safe-area-bottom));
  border: 0;
  border-top: 1px solid var(--cast-hairline);
  border-radius: 0;
  box-shadow: none;
}

.cast-bnav-item {
  gap: var(--s1);
  width: auto;
  min-width: 55px;
}

.cast-bnav-icon {
  display: block;
  width: 21px;
  height: 21px;
}

.cast-bnav-label {
  font-size: 10px;
}

/* 夜の劇場: キャスト詳細 (C2)。画像を4:5で見せ、下端をページ背景へつなぐ。 */
#cast-detail-view {
  --cast-detail-image-fade: linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--bg) 22%, transparent) 70%, var(--bg) 100%);
}

:root[data-theme="dark"] #cast-detail-view {
  --cast-detail-image-fade: linear-gradient(180deg, transparent 42%, rgba(5, 5, 6, 0.35) 68%, #050506 100%);
}

#cast-detail-view .cast-detail-scroll {
  background: var(--bg);
  color: var(--text);
}

#cast-detail-view .cast-header-bar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  width: 100%;
  max-width: 600px;
  min-height: var(--s6);
  padding: var(--s3) var(--s4);
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: translateX(-50%);
}

#cast-detail-view .cast-header-right {
  display: none;
}

#cast-detail-view .cast-header-back-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cast-hairline);
  border-radius: var(--s2);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--cast-ink);
  pointer-events: auto;
}

#cast-detail-view .cast-detail-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg);
}

/* カバーのないキャストは大きな空の舞台を作らず、名前と紹介を先に見せる。 */
#cast-detail-view .cast-detail-stage.is-no-cover {
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  padding: var(--s6) var(--s4) var(--s2);
}

#cast-detail-view .cast-detail-stage.is-no-cover::after {
  display: none;
}

#cast-detail-view .cast-detail-stage.is-no-cover > .cast-detail-header-no-cover {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0;
  pointer-events: auto;
}

#cast-detail-view .cast-detail-no-cover-avatar {
  display: flex;
  flex: 0 0 var(--s6);
  align-items: center;
  justify-content: center;
  width: var(--s6);
  height: var(--s6);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-soft);
}

#cast-detail-view button.cast-detail-no-cover-avatar {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

#cast-detail-view .cast-detail-no-cover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-detail-view .cast-detail-no-cover-avatar.is-blurred img {
  filter: blur(6px);
}

#cast-detail-view .cast-detail-no-cover-avatar svg {
  width: var(--s4);
  height: var(--s4);
  fill: var(--text-secondary);
}

#cast-detail-view .cast-detail-no-cover-copy {
  min-width: 0;
}

#cast-detail-view .cast-detail-no-cover-copy .cast-detail-name {
  margin-bottom: var(--s1);
}

#cast-detail-view .cast-detail-no-cover-copy .cast-detail-hook {
  margin-top: var(--s2);
}

#cast-detail-view .cast-detail-gallery-viewer {
  position: relative;
  aspect-ratio: 13 / 19;
  margin: var(--s3) var(--s4) 0;
  overflow: hidden;
  border-radius: var(--s2);
  background: var(--bg-secondary);
}

#cast-detail-view .cast-detail-gallery-viewer .cast-detail-hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#cast-detail-view .cast-detail-gallery-viewer .cast-detail-hero-slide,
#cast-detail-view .cast-detail-gallery-viewer .cast-detail-hero-img {
  width: 100%;
  height: 100%;
}

#cast-detail-view .cast-detail-gallery-viewer .cast-detail-hero-img {
  aspect-ratio: auto;
  object-fit: cover;
}

#cast-detail-view .cast-detail-stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cast-detail-image-fade);
  content: "";
  pointer-events: none;
}

#cast-detail-view .cast-detail-hero {
  position: absolute;
  inset: 0;
}

#cast-detail-view .cast-detail-hero,
#cast-detail-view .cast-detail-hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#cast-detail-view .cast-detail-hero-carousel {
  display: flex;
}

#cast-detail-view .cast-detail-hero-slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

#cast-detail-view .cast-detail-hero-img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

#cast-detail-view .cast-detail-stage > .cast-detail-header {
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  left: var(--s4);
  z-index: 2;
  padding: 0;
  color: var(--text);
  pointer-events: none;
}

#cast-detail-view .cast-detail-stage .cast-detail-name {
  margin: 0 0 var(--s1);
  color: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

#cast-detail-view .cast-detail-stage .cast-detail-tagline {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

#cast-detail-view .cast-detail-stage .cast-detail-hook {
  margin: var(--s2) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

#cast-detail-view .cast-detail-hero-menu {
  top: var(--s3);
  right: var(--s3);
}

#cast-detail-view .cast-detail-gallery-strip {
  padding: var(--s3) var(--s4) 0;
}

#cast-detail-view .cast-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3) var(--s4) var(--s4);
}

#cast-detail-view .cast-detail-tags,
#cast-detail-view .cast-detail-metrics,
#cast-detail-view .cast-detail-meta-actions,
#cast-detail-view .cast-detail-action-links {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

#cast-detail-view .cast-detail-tags {
  flex-wrap: wrap;
  gap: var(--s2);
}

#cast-detail-view .cast-detail-tag-hash {
  color: var(--cast-sub);
  font-size: 12px;
}

#cast-detail-view .cast-detail-tag {
  min-height: var(--s4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-sub);
  font: inherit;
  font-size: 12px;
}

#cast-detail-view .cast-detail-metrics {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-block: var(--s2);
  border-top: 1px solid var(--cast-hairline);
  border-bottom: 1px solid var(--cast-hairline);
}

#cast-detail-view .cast-detail-metric {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--s1);
  min-width: 0;
  padding-inline: var(--s3);
  color: var(--cast-sub);
  font-size: 12px;
}

#cast-detail-view .cast-detail-metric:not(:last-child) {
  border-right: 1px solid var(--cast-hairline);
}

#cast-detail-view .cast-detail-metric strong {
  color: var(--cast-ink);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#cast-detail-view .cast-detail-meta-actions {
  justify-content: space-between;
  min-height: var(--s4);
}

#cast-detail-view .cast-detail-author,
#cast-detail-view .cast-detail-meta-actions .cast-detail-owner-hint {
  margin: 0;
  color: var(--cast-sub);
  font-size: 13px;
}

#cast-detail-view .cast-detail-action-links {
  flex: 0 0 auto;
}

#cast-detail-view .cast-detail-meta .cast-detail-favorite-btn,
#cast-detail-view .cast-detail-meta .cast-detail-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  width: auto;
  min-width: var(--s4);
  height: var(--s4);
  flex: 0 0 auto;
  padding: 0 var(--s2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-ink);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
}

#cast-detail-view .cast-detail-meta .cast-detail-favorite-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

#cast-detail-view .cast-detail-meta .cast-detail-favorite-btn svg,
#cast-detail-view .cast-detail-meta .cast-detail-share-btn svg {
  width: 16px;
  height: 16px;
}

#cast-detail-view .cast-detail-description {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 0 var(--s4) var(--s4);
}

#cast-detail-view .cast-detail-description .cast-detail-section-title {
  margin-bottom: var(--s2);
}

#cast-detail-view .cast-detail-bottom-spacer {
  height: calc(var(--s6) * 2);
}

#cast-detail-view .cast-detail-sticky-cta {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 60;
  display: block;
  width: 100%;
  max-width: 600px;
  padding: var(--s3) var(--s4) calc(var(--s3) + var(--safe-area-bottom));
  border: 0;
  background: var(--bg);
  transform: translateX(-50%);
}

#cast-detail-view .cast-detail-cta-btn {
  height: 52px;
  border-radius: var(--s3);
  background: var(--accent);
  color: var(--cast-detail-cta-text);
  font-size: 16px;
  font-weight: 700;
}

/* C2 keeps the hero information sparse. Mode labels remain available in lists, not as detail badges. */
#cast-detail-view .cast-detail-stat-chips {
  display: none;
}

/* Keep the report action available without introducing a pill into the detail composition. */
#cast-detail-view .cast-detail-report-row {
  justify-content: flex-start;
  padding: var(--s3) var(--s4) 0;
}

#cast-detail-view .cast-detail-report-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cast-faint);
  font-size: 11px;
  font-weight: 500;
}

#cast-detail-view .cast-detail-report-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 夜の劇場のC1構成を匿名一覧でも共用する。 */
#cast-home-view .cast-anonymous-directory.cast-anonymous-c1 {
  padding: 0;
  background: var(--cast-bg);
  color: var(--cast-ink);
}

#cast-home-view .cast-anonymous-header .cast-header-right > * {
  display: inline-flex;
}

#cast-detail-view .cast-anonymous-header .cast-header-right {
  display: flex;
  pointer-events: auto;
}

/* 体験（V2）の話者名は背景装飾の縁取りを使わず、通常の文字で表示する。 */
html.onboarding-v2-trial .cast-chat-widget-root .cast-chat-name,
html.onboarding-v2-trial .cast-chat-widget-root .cast-novel-dialogue-name {
  text-shadow: none;
}

:root[data-theme="dark"] #cast-home-view .cast-anonymous-signup {
  background: #3d8bff;
}

:root[data-theme="dark"] #cast-detail-view .cast-anonymous-signup {
  background: #3d8bff;
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater {
  background: rgba(5, 5, 6, 0.78);
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-sheet {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--s3);
  background: #111113;
  color: #f2f3f5;
  box-shadow: 0 21px 55px rgba(0, 0, 0, 0.56);
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-description,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-policy,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-webview .type-body,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-copy-status {
  color: rgba(242, 243, 245, 0.68);
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-close,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-login,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-policy a {
  color: #f2f3f5;
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-handoff-warning {
  background: #1a1a1d;
  color: #f2f3f5;
}

:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-google,
:root[data-theme="dark"] .onboarding-entry-overlay.is-night-theater .onboarding-entry-copy {
  border-color: #3d8bff;
  background: #3d8bff;
  color: #f2f3f5;
}

#clr-list { display: grid; gap: 1rem; margin-block: 1rem; }
.clr-card { border: 1px solid var(--border-color, #d7dce1); border-radius: 12px; padding: 1rem; background: var(--surface-color, #fff); }
.clr-card h2 { margin: 0 0 .5rem; }
.clr-card > p { margin: .35rem 0; }
.clr-card button { margin: .25rem .35rem .25rem 0; }
.clr-report { border-top: 1px solid var(--border-color, #d7dce1); margin-top: .75rem; padding-top: .75rem; }
.clr-report p { white-space: pre-wrap; overflow-wrap: anywhere; }
.clr-hidden-state, .cast-lorebook-moderation-notice { border-inline-start: 4px solid #a23b3b; padding: .65rem .8rem; background: color-mix(in srgb, #a23b3b 8%, transparent); border-radius: 4px; }
.clr-hide-form, .cast-lorebook-report-form { display: grid; gap: .75rem; margin-block: .75rem; }
.clr-hide-form label, .cast-lorebook-report-form label { display: grid; gap: .3rem; }
.clr-hide-form textarea, .cast-lorebook-report-form textarea { width: 100%; resize: vertical; }
.clr-preview { border-top: 1px solid var(--border-color, #d7dce1); margin-top: .75rem; padding-top: .75rem; }
.clr-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.clr-preview article { border-top: 1px solid var(--border-color, #d7dce1); padding-block: .5rem; }
.cast-lorebook-report-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #d7dce1); }

/* Castホーム上部のお知らせ。画像の選択は管理画面の明示フラグに限定する。 */
#cast-home-view .cast-home-notices {
  position: relative;
  width: calc(100% - var(--s4) * 2);
  margin: var(--s3) var(--s4) var(--s4);
  overflow: hidden;
  border-radius: 13px;
  background: var(--cast-bg, #050506);
}

#cast-home-view .cast-home-notices-track {
  display: flex;
  width: 100%;
  aspect-ratio: 4 / 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

#cast-home-view .cast-home-notices-track::-webkit-scrollbar { display: none; }

#cast-home-view .cast-home-notice {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 13px;
  background: var(--cast-surface, #151516);
  color: #f2f3f5;
  scroll-snap-align: start;
  text-decoration: none;
}

#cast-home-view .cast-home-notice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast-home-view .cast-home-notices-count {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  z-index: 1;
  padding: var(--s1) var(--s2);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(5, 5, 6, .72);
  color: #f2f3f5;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#cast-home-view .cast-home-notice:focus-visible {
  outline: 2px solid #3d8bff;
  outline-offset: -2px;
}
#cast-ambient-view:not(.cast-ambient-style-ready):not(.cast-ambient-entry-state) {
  visibility: hidden;
}

#cast-ambient-view.cast-ambient-entry-state {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: var(--s5);
  color: var(--text-primary, var(--text));
}

#cast-ambient-view .cast-ambient-entry-status {
  width: min(100%, 34rem);
  padding: var(--s5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card, 13px);
  background: var(--surface, var(--bg-secondary));
  text-align: center;
}

#cast-ambient-view .cast-ambient-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

#cast-ambient-view .cast-ambient-entry-actions button {
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-button, 8px);
  background: var(--bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
}