/* ============================================
   BJ 2.0 — 旅の便り (Letters) Page Styles
   /letters/ — 紹介ページ + チャット画面
   ============================================ */

/* ========== Mini Hero（控えめ・マイアカウント踏襲） ========== */
.bj20-page .bj-letters-hero {
  position: relative;
  width: 100%;
  height: clamp(200px, 30vh, 320px);
  overflow: hidden;
}
.bj20-page .bj-letters-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.bj20-page .bj-letters-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-black-rgb), 0.40) 0%,
    rgba(var(--color-black-rgb), 0.58) 100%
  );
  z-index: 1;
}
.bj20-page .bj-letters-hero__content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.bj20-page .bj-letters-hero__content .bj-section__label {
  color: var(--color-accent);
  margin-bottom: 12px;
}
.bj20-page .bj-letters-hero__heading {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 42px);
  color: var(--color-bg);
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-shadow: 0 2px 16px rgba(var(--color-black-rgb), 0.3);
}
.bj20-page .bj-letters-notice {
  width: min(920px, calc(100% - 48px));
  margin: 28px auto 0;
  padding: 14px 18px;
  border: 1px solid var(--color-accent);
  background: var(--color-bg-sub);
  color: var(--color-text);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  letter-spacing: var(--ls-tight);
}
.bj20-page .bj-letters-notice--error {
  border-color: var(--color-error);
  color: var(--color-error);
}
/* チャットモード時の main。スクロール container は body 単一に統一する。
   main は自然な高さで、composer が body 単位の sticky bottom 0 として
   常に viewport 下端に貼り付く。
   ヘッダー直下にパンくず固定バー (.bj-letters-chat-title) を出すため、
   main padding-top は header + title の合計を CSS 変数で表現する。 */
/* モバイル（≤767）と PC（≥768）で bj-header の高さが異なる:
   モバイル is-scrolled = 64px / PC is-scrolled = 68px
   パンくずバーは 13px フォントに合わせて細め。PC は少し上下余白広め。 */
.bj20-page.bj-letters--chat {
  --bj-letters-header-h: 64px;
  --bj-letters-title-h: 36px;
}
.admin-bar.bj20-page.bj-letters--chat {
  --bj-letters-header-h: 110px; /* 64 + 46 admin mobile */
}
@media (min-width: 768px) {
  .bj20-page.bj-letters--chat {
    --bj-letters-header-h: 68px;
    --bj-letters-title-h: 40px;
  }
  .admin-bar.bj20-page.bj-letters--chat {
    --bj-letters-header-h: 100px; /* 68 + 32 admin desktop */
  }
}

/* モバイル: フッター非表示（チャットモード時のみ） */
@media (max-width: 767px) {
  .bj20-page.bj-letters--chat .bj-footer {
    display: none;
  }
}
.bj20-page.bj-letters--chat .bj-letters-main {
  padding-top: calc(var(--bj-letters-header-h) + var(--bj-letters-title-h));
}

/* ========== パンくず固定バー（ヘッダー直下） ==========
   フォント・大きさはトピックページの .bj-topic-meta__context に合わせる。
   背景はヘッダーと同じ（scrolled 状態の bg）にして罫線で区切るのみ。 */
.bj20-page.bj-letters--chat .bj-letters-chat-title {
  position: fixed;
  top: var(--bj-letters-header-h);
  left: 0;
  right: 0;
  z-index: 9;
  height: var(--bj-letters-title-h);
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: rgba(var(--color-bg-rgb), 0.97);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .bj20-page.bj-letters--chat .bj-letters-chat-title {
    padding: 0 40px;
  }
}
.bj20-page.bj-letters--chat .bj-letters-breadcrumb {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  font-family: var(--sans-jp);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--color-text-sub);
}
/* 室況: パンくず右端にテキストで配置（部屋全体の状況） */
.bj20-page .bj-letters-breadcrumb__mood {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text-sub);
}
.bj20-page .bj-letters-breadcrumb__mood-label {
  color: var(--color-text-muted);
}
.bj20-page .bj-letters-breadcrumb__mood-label::after {
  content: '：';
}
.bj20-page .bj-letters-breadcrumb__mood[data-mood-key="moderate"] .bj-letters-breadcrumb__mood-value {
  color: var(--color-kitsurubami-600);
}
.bj20-page .bj-letters-breadcrumb__mood[data-mood-key="busy"] .bj-letters-breadcrumb__mood-value {
  color: var(--color-akane-500);
}
.bj20-page .bj-letters-breadcrumb__link {
  color: var(--color-text-sub);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bj20-page .bj-letters-breadcrumb__link:hover {
  color: var(--color-accent);
}
.bj20-page .bj-letters-breadcrumb__sep {
  color: var(--color-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.bj20-page .bj-letters-breadcrumb__current {
  color: var(--color-text-sub);
}
.bj20-page.bj-letters--chat .bj-letters-notice {
  margin-top: 10px;
}


/* ============================================
   紹介ページ
   ============================================ */

/* 旅の便りで交わすこと */
.bj20-page .bj-letters-intro .bj-section__inner {
  max-width: var(--content-w);
  text-align: center;
}
.bj20-page .bj-letters-intro .bj-section__label {
  display: block;
  margin-bottom: 16px;
}
.bj20-page .bj-letters-intro .bj-section__body {
  margin-top: 28px;
}

/* 旅の便りのひととき（Glimpse — 実際のやりとり画像を見せるセクション） */
.bj20-page .bj-letters-glimpse {
  padding-top: 0;
}
.bj20-page .bj-letters-glimpse .bj-section__inner {
  max-width: var(--content-w);
  text-align: center;
}
.bj20-page .bj-letters-glimpse__figure {
  margin: 56px auto 0;
  max-width: 520px;
}
.bj20-page .bj-letters-glimpse__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0;
}
.bj20-page .bj-letters-glimpse__caption {
  margin-top: 18px;
  font-family: var(--sans-jp);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
  text-align: center;
}
/* プレミアム機能の注記（写真キャプションの下、控えめに目立たせる） */
.bj20-page .bj-letters-intro__plan-notice {
  display: inline-block;
  margin: 28px auto 0;
  padding: 10px 24px;
  background: var(--color-seiji-100);
  border: 1px solid var(--color-seiji-300);
  border-radius: 4px;
  font-family: var(--sans-jp);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

/* 旅の便りの作法ブロック */
.bj20-page .bj-letters-notes {
  padding-bottom: 0;
}
.bj20-page .bj-letters-notes .bj-section__inner {
  max-width: var(--content-w);
}
.bj20-page .bj-letters-notes__title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  text-align: center;
  margin-bottom: 28px;
}
.bj20-page .bj-letters-notes__title:has(+ .bj-letters-notes__tagline) {
  margin-bottom: 10px;
}
.bj20-page .bj-letters-notes__tagline {
  margin: 0 0 28px;
  font-family: var(--serif-jp);
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  text-align: center;
}
.bj20-page .bj-letters-notes__list {
  list-style: none;
  padding: 36px 32px;
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
}
.bj20-page .bj-letters-notes__list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
  letter-spacing: var(--ls-tight);
}
.bj20-page .bj-letters-notes__list li + li {
  margin-top: 14px;
}
.bj20-page .bj-letters-notes__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 担当先生 */
.bj20-page .bj-letters-senseis {
  background: var(--color-bg-sub);
}
.bj20-page .bj-letters-senseis .bj-section__inner {
  max-width: var(--wide-w);
  text-align: center;
}
.bj20-page .bj-letters-senseis__label { display: block; margin-bottom: 16px; }
.bj20-page .bj-letters-senseis__heading { margin-bottom: 48px; }
.bj20-page .bj-letters-senseis__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.bj20-page .bj-letters-sensei-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.bj20-page .bj-letters-sensei-card--master {
  grid-column: 1 / -1;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 48px 36px;
}
.bj20-page .bj-letters-sensei-card__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--color-kitsurubami-300), var(--color-kitsurubami-500));
  margin-bottom: 20px;
  overflow: hidden;
}
.bj20-page .bj-letters-sensei-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bj20-page .bj-letters-sensei-card__avatar span {
  font-family: var(--serif-jp);
  font-size: 34px;
  color: var(--color-bg);
}
.bj20-page .bj-letters-sensei-card__role {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
  margin-bottom: 8px;
}
.bj20-page .bj-letters-sensei-card__name {
  font-family: var(--serif-jp);
  font-size: var(--fs-heading-m);
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
}
.bj20-page .bj-letters-sensei-card__bio {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
  text-align: left;
}

/* 利用規約・作法を読むリンク（紹介ページ・CTA直前） */
.bj20-page .bj-letters-rules-link {
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: 56px;
}
.bj20-page .bj-letters-rules-link .bj-section__inner {
  max-width: var(--content-w);
  text-align: center;
}
.bj20-page .bj-letters-rules-link__button {
  background: none;
  border: 0;
  padding: 8px 0;
  font-family: var(--sans-jp);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bj20-page .bj-letters-rules-link__button:hover {
  color: var(--color-accent);
}

/* CTA（紹介ページ） */
.bj20-page .bj-letters-cta {
  background: var(--color-surface-dark);
}
.bj20-page .bj-letters-cta .bj-cta__heading { color: var(--color-bg); }


/* ============================================
   チャット画面（Fune active）
   スクロール container は body のみ。chat / __inner は通常 flow で配置し、
   composer が body 単位の sticky bottom 0 で常時 viewport 下端に貼り付く。
   ============================================ */
.bj20-page .bj-letters-chat {
  background: var(--color-bg);
  padding: 0;
}
.bj20-page .bj-letters-chat__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
/* 処理状況テキスト（composer 上部中央、進行中のときだけ表示） */
.bj20-page .bj-letters-composer__status {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--sans-jp);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
  color: var(--color-text-muted);
}
/* 進行ステータスのキーごとに色味を変える（控えめ） */
.bj20-page .bj-letters-composer__status[data-status-key="finalizing"] {
  color: var(--color-seiji-600);
}

/* スレッド（メッセージ縦積み）
   下余白は composer との間に呼吸を確保するため広めに取る */
.bj20-page .bj-letters-thread {
  padding: 20px 8px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bj20-page .bj-letters-thread__sentinel {
  height: 1px; flex: 0 0 auto;
}
.bj20-page .bj-letters-thread__loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-normal);
  padding: 4px 0 12px;
}
.bj20-page .bj-letters-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: bj-letters-spin 0.8s linear infinite;
}
@keyframes bj-letters-spin { to { transform: rotate(360deg); } }

/* 日付区切り */
.bj20-page .bj-letters-date {
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0;
}
.bj20-page .bj-letters-date span {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
  background: var(--color-bg-sub);
  border-radius: 999px;
  padding: 4px 14px;
}

/* 初回システムメッセージ */
.bj20-page .bj-letters-system {
  align-self: center;
  max-width: 88%;
  text-align: center;
  font-family: var(--serif-jp);
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
  background: var(--color-kitsurubami-100);
  border: 1px solid var(--color-kitsurubami-200);
  border-radius: 12px;
  padding: 16px 22px;
}

/* メッセージ共通 */
.bj20-page .bj-msg {
  display: block;
  max-width: 100%;
}
.bj20-page .bj-msg__body {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
/* 吹き出し + 時刻 を横並びにする行。LINE 風に時刻が吹き出しの外側下端に。 */
.bj20-page .bj-msg__row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}
.bj20-page .bj-msg--me .bj-msg__row {
  justify-content: flex-end;
}
.bj20-page .bj-msg__bubble {
  border-radius: 16px;
  padding: 14px;
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
.bj20-page .bj-msg__text {
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  letter-spacing: var(--ls-tight);
  word-break: break-word;
}
/* wpautop が挿入する <p> の上下マージンを正規化し、吹き出し padding が
   余白の唯一の制御要素になるようにする。段落間は p + p で空ける。 */
.bj20-page .bj-msg__text p {
  margin: 0;
}
.bj20-page .bj-msg__text p + p {
  margin-top: 0.8em;
}
.bj20-page .bj-msg__time {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-bottom: 2px;
}
.bj20-page .bj-msg__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-top: 6px;
  padding: 0 4px;
}
.bj20-page .bj-msg__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-sub);
}

/* 自分（右） */
.bj20-page .bj-msg--me {
  align-self: flex-end;
  max-width: 88%;
}
.bj20-page .bj-msg--me .bj-msg__body {
  align-items: flex-end;
}
.bj20-page .bj-msg--me .bj-msg__bubble {
  background: var(--color-seiji-200);
  color: var(--color-text);
  border-bottom-right-radius: 0;
}
/* 自分側はメタ（アバター + 氏名 + 時刻）を右寄せで、アバターを右端に配置 */
.bj20-page .bj-msg--me .bj-msg__meta {
  flex-direction: row-reverse;
}

/* 先生側（左） */
.bj20-page .bj-msg--sensei {
  align-self: flex-start;
  max-width: 88%;
}
.bj20-page .bj-msg--sensei .bj-msg__body {
  align-items: flex-start;
}
.bj20-page .bj-msg__avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bj20-page .bj-msg--sensei .bj-msg__avatar {
  background: linear-gradient(145deg, var(--color-tetsukon-300), var(--color-tetsukon-500));
}
.bj20-page .bj-msg--me .bj-msg__avatar {
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
}
.bj20-page .bj-msg__avatar img,
.bj20-page .bj-msg__avatar .avatar,
.bj20-page .bj-msg__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  float: none;
  position: static;
}
.bj20-page .bj-msg--sensei .bj-msg__avatar span {
  font-family: var(--serif-jp);
  font-size: 15px;
  color: var(--color-bg);
}
.bj20-page .bj-msg--sensei .bj-msg__bubble {
  background: var(--color-bg-sub);
  color: var(--color-text);
  border-bottom-left-radius: 0;
}

/* メッセージ内の写真 */
.bj20-page .bj-msg__photos {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  /* 確定幅を与え、写真の箱サイズを画像ロードに依存させない。狭い端末では
     max-width:100% で吹き出し幅まで縮む。 */
  width: 220px;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
/* 写真は吹き出し内で左揃え（自分側・先生側共通） */
.bj20-page .bj-msg--me .bj-msg__photos {
  margin-left: 0;
}
.bj20-page .bj-msg__photos--1 { grid-template-columns: 1fr; }
.bj20-page .bj-msg__photos--2,
.bj20-page .bj-msg__photos--4 { grid-template-columns: 1fr 1fr; }
.bj20-page .bj-msg__photos--3 { grid-template-columns: 1fr 1fr 1fr; }
.bj20-page .bj-msg__photos a {
  display: block;
}
/* 箱は常に 4:3 に固定し、画像ロード前から領域を予約する。img の width/height
   属性（PHP 側 800x600）+ グリッドの確定幅と組み合わせ、画像が後から届いても
   箱サイズが変わらない＝レイアウトが伸びてカクつくのを防ぐ。background は
   ロード中のプレースホルダー。 */
.bj20-page .bj-msg__photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-suna-300);
}

/* ========== 入力 UI（チャットパネル下部に固定） ========== */
.bj20-page .bj-letters-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--color-seiji-200);
  border: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 36px rgba(var(--color-black-rgb), 0.06);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}

/* 写真添付 4 枠：未添付時は非表示。1枚でも添付されたら grid で表示（プレビュー＋削除）*/
.bj20-page .bj-letters-slots {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.bj20-page .bj-letters-composer:has(.bj-letters-slot.is-filled) .bj-letters-slots {
  display: grid;
}
.bj20-page .bj-letters-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-suna-100);
  transition: background 0.25s ease;
}
.bj20-page .bj-letters-slot:hover { background: var(--color-seiji-100); }
.bj20-page .bj-letters-slot__input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.bj20-page .bj-letters-slot__plus svg {
  width: 22px; height: 22px;
  stroke: var(--color-suna-600); fill: none; stroke-width: 1.5;
  stroke-linecap: round;
}
.bj20-page .bj-letters-slot.is-filled .bj-letters-slot__plus { display: none; }
.bj20-page .bj-letters-slot__preview {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: none;
}
.bj20-page .bj-letters-slot.is-filled .bj-letters-slot__preview { display: block; }
.bj20-page .bj-letters-slot__remove {
  position: absolute; top: 4px; right: 4px;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(var(--color-black-rgb), 0.6);
  display: flex; align-items: center; justify-content: center;
}
.bj20-page .bj-letters-slot__remove svg {
  width: 12px; height: 12px;
  stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round;
}

/* 本文 + 送信 */
.bj20-page .bj-letters-composer__row {
  display: flex; align-items: flex-end; gap: 10px;
}
.bj20-page .bj-letters-composer__text {
  flex: 1 1 auto;
  resize: none;
  max-height: 140px;
  font-family: var(--sans-jp);
  /* iOS Safari は font-size < 16px の入力欄にフォーカスすると自動ズームし、blur 後も
     ズームが残って送信ボタンが画面外に見切れる。16px 固定でこのズームを防ぐ。 */
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-suna-100);
  border: 0;
  border-radius: 22px;
  padding: 11px 18px;
}
.bj20-page .bj-letters-composer__text:focus {
  outline: none;
}
.bj20-page .bj-letters-composer__attach {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bj20-page .bj-letters-composer__attach:hover {
  background: var(--color-seiji-100);
}
.bj20-page .bj-letters-composer__attach svg {
  width: 24px; height: 24px;
  stroke: var(--color-text-sub);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bj20-page .bj-letters-composer__send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-seiji-500);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, opacity 0.25s ease, transform 0.15s ease;
}
.bj20-page .bj-letters-composer__send svg {
  width: 20px; height: 20px;
  stroke: var(--color-bg); fill: none; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  transform: translateX(-1px);
}
.bj20-page .bj-letters-composer__send:hover:not(:disabled) { background: var(--color-seiji-600); }
.bj20-page .bj-letters-composer__send:active:not(:disabled) { transform: scale(0.94); }
.bj20-page .bj-letters-composer__send:disabled {
  background: var(--color-suna-400);
  cursor: not-allowed;
}
.bj20-page .bj-letters-composer__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 0 6px;
}
.bj20-page .bj-letters-composer__rules {
  flex: 0 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans-jp);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-border);
  cursor: pointer;
  transition: color 0.2s ease;
}
.bj20-page .bj-letters-composer__rules:hover { color: var(--color-accent); }
.bj20-page .bj-letters-composer__counter {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-normal);
}
.bj20-page .bj-letters-composer__counter.is-over { color: var(--color-error); }
.bj20-page .bj-letters-composer.is-submitting {
  opacity: 0.68;
  pointer-events: none;
}


/* ========== ライトボックス（メッセージ内写真のタップ拡大） ========== */
.bj-letters-lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}
.bj-letters-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
}
.bj-letters-lightbox__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bj-letters-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.bj-letters-lightbox__close,
.bj-letters-lightbox__prev,
.bj-letters-lightbox__next {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  padding: 0;
}
.bj-letters-lightbox__close:hover,
.bj-letters-lightbox__prev:hover,
.bj-letters-lightbox__next:hover {
  background: rgba(255, 255, 255, 1);
}
.bj-letters-lightbox__close svg,
.bj-letters-lightbox__prev svg,
.bj-letters-lightbox__next svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bj-letters-lightbox__close {
  top: 16px;
  right: 16px;
}
.bj-letters-lightbox__prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.bj-letters-lightbox__next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.bj-letters-lightbox[data-single] .bj-letters-lightbox__prev,
.bj-letters-lightbox[data-single] .bj-letters-lightbox__next {
  display: none;
}
.bj-msg__photos a {
  cursor: zoom-in;
}


/* ========== 作法・注意事項モーダル ========== */
.bj-letters-rules {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  background: transparent;
  /* パネルを中央寄せ。背景（パネル外）クリックで閉じられるよう dialog 自体を flex に */
  align-items: center;
  justify-content: center;
}
.bj-letters-rules[open] { display: flex; }
.bj-letters-rules::backdrop { background: rgba(var(--color-black-rgb), 0.55); }
.bj-letters-rules__panel {
  position: relative;
  width: min(560px, calc(100% - 40px));
  max-height: 80dvh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: 0;
  padding: 36px 28px 32px;
  box-shadow: 0 20px 60px rgba(var(--color-black-rgb), 0.25);
}
.bj20-page .bj-letters-rules__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-sub);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bj20-page .bj-letters-rules__close:hover { background: var(--color-border); }
.bj-letters-rules__close svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--color-text);
  stroke-width: 2; stroke-linecap: round;
}
.bj-letters-rules__title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-heading-m);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0 0 12px;
  text-align: center;
}
/* showModal 時に title へ autofocus を移しているため、
   プログラム由来のフォーカスのアウトラインは抑える。
   Tab で巡回するときは tabindex=-1 のため到達しない。 */
.bj-letters-rules__title:focus { outline: none; }
.bj-letters-rules__intro {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
}
.bj-letters-rules__subtitle {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 26px 0 12px;
  text-align: center;
}
.bj-letters-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bj-letters-rules__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
}
.bj-letters-rules__list li + li { margin-top: 10px; }
.bj-letters-rules__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.bj-letters-rules__list a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}
/* 作法は利用規約と一線を画す「座布団」（淡い背景・中央寄せ） */
.bj-letters-rules__zabuton {
  margin: 22px 0 8px;
  padding: 28px 24px;
  background: var(--color-kitsurubami-100);
  border-radius: 16px;
  text-align: center;
}
.bj-letters-rules__zabuton .bj-letters-rules__subtitle {
  margin: 0 0 4px;
  font-family: var(--sans-jp);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
}
/* 作法の箇条書きは囲みの中で左揃え（点付き）に戻す */
.bj-letters-rules__zabuton .bj-letters-rules__list {
  text-align: left;
}
.bj-letters-rules__tagline {
  margin: 0 0 18px;
  font-family: var(--serif-jp);
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  text-align: center;
}
.bj-letters-rules__article {
  font-family: var(--sans-jp);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: 20px 0 6px;
}
.bj-letters-rules__text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
}
.bj-letters-rules__ol {
  margin: 0;
  padding-left: 1.4em;
}
.bj-letters-rules__ol li {
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
}
.bj-letters-rules__ol li + li { margin-top: 8px; }
.bj-letters-rules__ol a,
.bj-letters-rules__text a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}

/* 同意フッター（同意モード .is-consent のときだけ表示） */
.bj-letters-rules__consent { display: none; }
.bj-letters-rules.is-consent .bj-letters-rules__consent {
  display: block;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.bj-letters-rules.is-consent .bj-letters-rules__close { display: none; }
.bj-letters-rules__agree {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 420px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  font-family: var(--sans-jp);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.bj-letters-rules__agree input {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--color-surface-dark);
  cursor: pointer;
}
.bj20-page .bj-letters-rules__enter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  padding: 18px 32px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--color-surface-dark);
  color: var(--color-bg);
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-link);
  cursor: pointer;
  transition: background 0.4s ease, gap 0.3s ease;
}
.bj20-page .bj-letters-rules__enter:hover:not(:disabled) {
  background: rgba(var(--color-surface-dark-rgb), 0.82);
  gap: 18px;
}
.bj20-page .bj-letters-rules__enter:disabled {
  background: var(--color-suna-300);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.bj20-page .bj-letters-rules__enter svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  flex-shrink: 0;
}


/* ========== レスポンシブ ========== */
@media (max-width: 768px) {
  .bj20-page .bj-letters-senseis__layout {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 360px;
    margin: 0 auto;
  }
  .bj20-page .bj-letters-sensei-card--master {
    grid-column: auto;
    padding: 40px 24px;
  }

  /* チャット領域をスマホで全幅に近づける。
     chat__inner の左右パディングを外し、composer のパディングも詰める。
     スレッド側 (.bj-letters-thread) は自前の左右 8px を持つので
     バブルは画面端から 8px+α 確保される。 */
  .bj20-page .bj-letters-chat__inner {
    padding: 0;
  }
  .bj20-page .bj-letters-composer {
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }

  /* テキスト入力中はカメラアイコンを畳んで入力欄を広げる。
     添付ボタン自身へのフォーカスでは隠さず、ファイル選択を起動できるようにする。 */
  .bj20-page .bj-letters-composer__row:has(.bj-letters-composer__text:focus) .bj-letters-composer__attach {
    display: none;
  }
}