/**
 * Name: [child] おすすめ記事の「?」ヘルプ
 * Description: 副題を畳んだ丸い「?」ボタンとポップアップのスタイル。
 *   セマンティック検索の既存ヘルプ（.aidb-semantic-search-help-btn）と
 *   同じ見た目に揃えている。
 * Depends on: assets/js/rec-subtitle-help.js
 * Version: 1.0.0
 * Author: Parks Inc. (katano)
 */

/* 見出しが折り返さないよう、余った幅は「?」側に寄せる */
.aidb-front-module .aidb-rec-header {
  gap: 6px;
  align-items: center;
}

.aidb-front-module .aidb-rec-title {
  min-width: 0;
}

.aidb-rec-help-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.aidb-rec-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #bbb;
  background: transparent;
  color: #999;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.aidb-rec-help-btn:hover,
.aidb-rec-help-btn:focus-visible {
  border-color: #1a1a2e;
  color: #1a1a2e;
  background: rgba(26, 26, 46, 0.05);
}

.aidb-rec-help-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 220px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #444;
  text-align: left;
  white-space: normal;
}

.aidb-rec-help-popup[hidden] {
  display: none;
}

.aidb-rec-help-popup::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  transform: rotate(45deg);
}