/* ============================================================
   BlockBoard 公開側スタイル（常時読込・自己完結。テーマCSSに依存しない）
   チャット吹き出し風のひとこと掲示板。名前頭文字の自動色アバター付き。
   ============================================================ */
.bkbd-root{ max-width:640px; margin:0 auto; box-sizing:border-box; font-family:inherit; }
.bkbd-root *{ box-sizing:border-box; }

.bkbd-head{ margin-bottom:14px; }
.bkbd-title{ margin:0 0 4px; font-size:19px; font-weight:800; color:var(--tm-text, #2b2118); line-height:1.4; }
.bkbd-intro{ margin:0; font-size:13.5px; color:var(--tm-text-sub, #6b625a); line-height:1.8; }

/* --- 投稿フォーム --- */
.bkbd-form{ background:#faf7f3; border:1px solid #e6ddd0; border-radius:14px; padding:16px; margin-bottom:20px; }
.bkbd-form-row{ margin-bottom:10px; }
.bkbd-form-row:last-of-type{ margin-bottom:0; }
.bkbd-label{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#5a5048; margin-bottom:5px; }
.bkbd-required{ display:inline-block; font-size:10.5px; font-weight:800; color:#b5651d; background:#fbe9d7; border-radius:5px; padding:1px 6px; }
.bkbd-optional{ display:inline-block; font-size:10.5px; font-weight:700; color:#8a7f74; background:#efe9e1; border-radius:5px; padding:1px 6px; }
.bkbd-input{ width:100%; border:2px solid #ddd2c2; border-radius:9px; background:#fff; padding:9px 12px; font-size:14px; color:#2b2118; font-family:inherit; }
.bkbd-input:focus{ outline:none; border-color:var(--tm-brand, #b5651d); }
textarea.bkbd-input{ resize:vertical; min-height:56px; line-height:1.6; }

/* honeypot: 人間には見えず、ボットのフォーム自動入力だけが引っかかる */
.bkbd-hp-wrap{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.bkbd-form-foot{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.bkbd-submit{ appearance:none; border:none; border-radius:999px; background:var(--tm-brand, #b5651d); color:#fff; font-size:14px; font-weight:800; padding:10px 22px; min-height:40px; cursor:pointer; transition:transform .15s, opacity .15s; }
.bkbd-submit:hover{ opacity:.9; }
.bkbd-submit:active{ transform:scale(.97); }
.bkbd-submit:disabled{ opacity:.55; cursor:default; }
.bkbd-form-status{ font-size:12.5px; font-weight:700; color:#8a5000; min-height:1em; }

/* --- 投稿一覧（チャット吹き出し） --- */
.bkbd-empty{ border:2px dashed #d9cfc0; border-radius:12px; background:#fbf8f4; padding:20px 16px; text-align:center; color:#8a7f74; font-size:13px; font-weight:700; }

.bkbd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.bkbd-item{ display:flex; align-items:flex-start; gap:10px; }
.bkbd-avatar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#fff;
  background:hsl(var(--bkbd-hue, 200), 58%, 46%);
}
.bkbd-bubble{ position:relative; flex:1 1 auto; min-width:0; background:#fff; border:1px solid #ece3d6; border-radius:4px 16px 16px 16px; padding:10px 14px; box-shadow:0 1px 2px rgba(30,20,10,.05); }
.bkbd-meta{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:3px; }
.bkbd-name{ font-size:13px; font-weight:800; color:#3a2f24; }
.bkbd-time{ font-size:11px; font-weight:600; color:#a89d8f; }
.bkbd-message{ font-size:14px; line-height:1.75; color:#3a2f24; word-break:break-word; white-space:normal; }

/* 新規投稿のふわっとした追加アニメーション */
@keyframes bkbd-fade-in{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.bkbd-item.bkbd-enter{ animation:bkbd-fade-in .45s ease-out; }

.bkbd-editnote{ margin-top:12px; text-align:center; color:#8a5000; font-size:12px; font-weight:700; }

@media(max-width:480px){
  .bkbd-form{ padding:13px; border-radius:12px; }
  .bkbd-avatar{ width:32px; height:32px; font-size:13px; }
  .bkbd-bubble{ padding:9px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .bkbd-item.bkbd-enter{ animation:none; }
  .bkbd-submit{ transition:none; }
}