/* ===== レイアウト基礎 ===== */
.bbs-chat-viewer-container{
  display:flex; height:800px; border:1px solid #ccc; box-sizing:border-box; overflow:hidden;
  font-family: Arial, sans-serif;
}
.bbs-chat-viewer-container .left-column{
  width:30%; padding:10px; background:#fafafa; border-right:1px solid #ccc;
  height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
.bbs-chat-viewer-container .right-column{
  width:70%; position:relative; padding:0; height:100%; overflow:hidden;
}
#detail-iframe{ width:100%; height:100%; border:0; display:block; }

/* 見出し＆アコーディオン */
.bbs-chat-viewer-container .left-column h3{
  display:block; margin:10px 0 6px; font-size:14px; font-weight:700; line-height:1.4; cursor:pointer;
}
.bbs-chat-viewer-container .left-column .fold-body{ list-style:none; margin:0; padding:0; }
.bbs-chat-viewer-container .left-column .fold-body > li{
  display:block; margin:0; padding:8px 10px; border-bottom:1px solid #ddd; box-sizing:border-box;
}
.bbs-chat-viewer-container .left-column .fold-body > li:hover{ background:#f7fafc; }
.bbs-chat-viewer-container .left-column .fold-body > li.active{ background:#e0f0ff; border-left:3px solid #2b6cb0; }

/* 左カラムのボタン */
.bbs-chat-viewer-container .joint-board-button{
  margin:6px 0 10px; padding:8px 10px; background:#edf2f7; border:1px solid #cbd5e0; border-radius:4px;
  font-weight:600; text-align:center; cursor:pointer;
}
.bbs-chat-viewer-container .joint-board-button:hover{ background:#e2e8f0; }

/* ===== 右カラム：カード一覧 ===== */
.topic-list-view{ padding:12px; }
.topic-list-view h3{ margin:0 0 10px; font-size:16px; }
.topic-cards{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.topic-card{
  border:1px solid #cfe8e6; background:#fdfefe; border-radius:8px; padding:12px;
}

/* ヘッダ（タイトル左＋NEW右） */
.topic-card .tc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.tc-head-left{ min-width:0; } /* 折返し配慮 */
.topic-card .tc-title{ font-size:15px; line-height:1.5; }
.tc-head-right{ display:flex; align-items:center; gap:8px; }

/* ステータス */
.tc-status-line{ margin-top:6px; }
.tc-status{
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; border:1px solid transparent;
}
.tc-status--alert{ color:#b91c1c; background:#fde2e2; border-color:#fbb; }
.tc-status--ok   { color:#1e429f; background:#e0ecff; border-color:#bcd3ff; }

/* NEWバッジ（タイトル右） */
.tc-badge.tc-badge--new{
  display:inline-block; font-size:11px; padding:2px 6px; background:#ffefc6; border:1px solid #ffd783;
  border-radius:9999px; color:#a96300;
}

/* 本文部 */
.topic-card .tc-body{ display:grid; gap:6px; }
.topic-card .tc-line{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.topic-card .tc-role{
  display:inline-block; font-size:12px; padding:2px 6px; border-radius:9999px; background:#ffe6b3; color:#5c3a00;
}
.topic-card .tc-msg{ font-size:14px; color:#333; }

/* メタ行（FAアイコン使用） */
.topic-card .tc-meta{ display:flex; gap:16px; font-size:12px; color:#555; }
.tc-meta-item i{ margin-right:6px; }

/* ボタン群 */
.topic-card .tc-actions{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.tc-btn{
  display:inline-block; padding:6px 10px; border:1px solid #9db2c0; background:#f4f8fb;
  border-radius:4px; text-decoration:none; font-size:13px;
}
.tc-btn:hover{ background:#e9f2f7; }
.tc-btn--ghost{ background:#fff; border-color:#cbd5e0; }
.tc-btn--primary{ background:#4a89dc; border-color:#3d7bc9; color:#fff; }

/* 右カラムスクロール（中身が長いとき） */
.bbs-chat-viewer-container .right-column #detail-view{ height:100%; overflow-y:auto; }

/* 旧：擬似要素アイコンは使わない */
.tc-ico, .tc-ico::before{ content:none !important; }


/* 埋め込みモード：左を消し、右を全面に */
.bm-embed .bp-messages-side-threads { display: none !important; }

.bm-embed .bp-messages-column {
  transform: none !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

/* ===== 左カラム：折り畳み見出しのUI ===== */
/* 見出しのレイアウト：テキストは真ん中、矢印は右端固定 */
.bbs-chat-viewer .left-column .fold-toggle{
  display:flex; align-items:center;
  padding:10px 12px; margin:6px 0;
  background:#f1f5f9; color:#222; border:1px solid #e5e7eb; border-radius:8px;
  font-weight:700; font-size:14px; line-height:1.35; cursor:pointer;
  position:relative;
}
.bbs-chat-viewer .left-column .fold-toggle .fold-text{
  flex:1 1 auto;               /* 矢印側に押されない */
  text-align:center;           /* 常に中央 */
}

/* ▼アイコン：サイズ大きめ、右端＆縦中央 */
.bbs-chat-viewer .left-column .fold-toggle::after{
  content:"▼";
  font-size:15px; line-height:1;
  flex:0 0 auto;
  margin-left:8px;
  transition:transform .2s;
}
.bbs-chat-viewer .left-column .fold-toggle[aria-expanded="true"]::after{
  transform:rotate(180deg);
}

/* ← ここが肝：ホバー／展開時の色を強制。テキスト側も白に */
.bbs-chat-viewer .left-column .fold-toggle:hover,
.bbs-chat-viewer .left-column .fold-toggle[aria-expanded="true"]{
  background: var(--color_link, #5eb6ff) !important;
  border-color: var(--color_link, #5eb6ff) !important;
  color:#fff !important;
}
.bbs-chat-viewer .left-column .fold-toggle:hover .fold-text,
.bbs-chat-viewer .left-column .fold-toggle[aria-expanded="true"] .fold-text{
  color:#fff !important;
}



/* 1つ目見出しの2行ブロック（<br>でもOK・そのままで大丈夫） */
.bbs-chat-viewer .left-column .fold-toggle .fold-lines{
  display:flex; flex-direction:column;
}


/* 1つ目の見出しだけは最初から2行に（文言を分けて表示） */
.bbs-chat-viewer .left-column .fold-toggle .fold-lines{
  display:flex; flex-direction:column;
}
.bbs-chat-viewer .left-column .fold-toggle .fold-lines .l1,
.bbs-chat-viewer .left-column .fold-toggle .fold-lines .l2{
  display:block;
}

/* 折り畳みリストとの区切りの点線（任意） */
.bbs-chat-viewer .left-column .fold-body{
  border-top:1px dashed #cbd5e1; margin:6px 0 10px; padding-top:8px;
}

/* 「合同授業の掲示板」「その他掲示板」ボタンのホバーも合わせる */
.bbs-chat-viewer .left-column .joint-board-button{
  background:#eef2f7; color:#333; border:1px solid #e5e7eb;
  border-radius:8px; padding:10px 12px; margin:6px 0;
  text-align:center; font-weight:700; cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.bbs-chat-viewer .left-column .joint-board-button:hover{
  background: var(--color_link, #5eb6ff);
  border-color: var(--color_link, #5eb6ff);
  color:#fff;
}

/* 開いた見出し・選択中ボタンの恒常ハイライト */
.bbs-chat-viewer .left-column .fold-toggle.is-current,
.bbs-chat-viewer .left-column .joint-board-button.active,
.bbs-chat-viewer .left-column .fold-toggle.is-current .fold-text{
  background: var(--color_link, #5eb6ff) !important;
  border-color: var(--color_link, #5eb6ff) !important;
  color:#fff !important;
}

/* チャット項目の選択ハイライト（ホバーと同等） */
.bbs-chat-viewer-container .left-column .fold-body > li.active-persist{
  background:#e0f3ff !important;
  border-left:3px solid #2b6cb0;
}

/* スマホ：1カラムにして右カラムは通常非表示 */
@media (max-width: 768px){

.tc-status-line{ text-align: start; }

  .bbs-chat-viewer-container{ display:block; height:auto; }
  .bbs-chat-viewer-container .left-column{ width:100%; height:auto; }
  .bbs-chat-viewer-container .right-column{ display:none; } /* ←PCだけ使う */
  /* クリック元の直下に出す詳細領域 */
  .bbs-chat-viewer-container .inline-detail{
    margin:10px 0 14px; padding:10px; border:1px solid #cfe8e6;
    background:#fdfefe; border-radius:8px;
  }
  .bbs-chat-viewer-container .inline-detail iframe{
    width:100%; height:60vh; border:0; display:block;
  }
}
@media (max-width: 768px){
  .bbs-chat-viewer-container{ display:block; height:auto; }
  .bbs-chat-viewer-container .left-column{ width:100%; height:auto; }
  .bbs-chat-viewer-container .right-column{ display:none; }

  /* クリック元のすぐ下に出る詳細 */
  .bbs-chat-viewer-container .inline-detail{
    margin:10px 0 14px; padding:10px; border:1px solid #cfe8e6;
    background:#fdfefe; border-radius:8px; height: 500px;
  }

}