/* /css/shell.css — 共有シェル(js/shell.js)が足す部品だけ。
   サイドバー・ヘッダ・フッターの土台は styles.css / bubblegum.css の既存クラスを流用する。 */

/* わたし系(ルビー / アカウント設定)— ログイン中のユーザーカード内 */
.shell-me-links { display: flex; gap: 12px; margin: 8px 0 10px; font-size: 12px; }
.shell-me-links a { color: var(--b-ink3, #b88aa0); text-decoration: none; }
.shell-me-links a:hover { color: var(--b-pink, #ff2d7a); }

/* 登録チャンネル(アバター + 名前 + 配信中の印・5 件) */
.shell-sub-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 11px; font-size: 13px; border-radius: 4px;
  color: var(--b-ink, #4a1f2e); text-decoration: none;
}
.shell-sub-row:hover { background: var(--b-pinkS, #ffe1ec); }
.shell-sub-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.shell-sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-sub-live {
  width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0;
  background: #e0245e; box-shadow: 0 0 0 2px var(--b-card, #fff);
}
.nav-item.shell-sub-all { font-size: 12px; padding: 6px 11px; }

/* 探索(ジャンル・右に配信数。0 件は数字なし) */
.nav-item.shell-genre-row { padding: 7px 11px; font-size: 12.5px; }
.shell-genre-count { margin-left: auto; font-size: 11px; color: var(--b-ink3, #b88aa0); }
.shell-more {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  padding: 6px 11px; text-align: left; font-size: 12px; color: var(--b-ink3, #b88aa0);
}
.shell-more:hover { color: var(--b-pink, #ff2d7a); }

/* hidden 属性を既存の .nav-section { display:flex } / grid に負けさせない */
.sidebar-nav .nav-section[hidden] { display: none !important; }

/* ---- シェルが描くモーダル(ログイン / 新規登録 / プロフィール編集)の土台 ----
   2026-09-21 (feat/shell-rollout): これらは index.css にしか無く、index.css を読まない
   profile / settings / watch / points / history では **モーダルが最初から開いて見えた**
   (styles.css の .modal-overlay は inline style を前提に display:flex へ倒す)。
   shell.js の部品は shell.css だけで成立させる。index.html では index.css と同値の重複。 */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-signup-row {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(255, 62, 160, 0.3);
  text-align: center; font-size: 0.82rem; color: var(--b-ink3, #b88aa0);
}
.modal-link-btn {
  background: none; border: none; padding: 4px 2px; margin-left: 2px;
  font: inherit; font-weight: 700; color: var(--b-pink, #ff3ea0);
  text-decoration: underline; cursor: pointer;
}
.modal-link-btn:hover { opacity: 0.8; }
/* 2026-09-25: ログインモーダルのボタンだけ中央寄せ (v0.9.2.as A-2 のオーナー指定)。
   この指定は index.css にしか無く、index.css を読まない watch / settings / points 等では
   styles.css / bubblegum.css の `.modal-actions { justify-content: flex-end }` が効いて
   **ボタンだけ右寄せ**になっていた (staging 実配信でオーナー指摘「トップと配信画面で違う」)。
   シェルが描く部品の見た目は shell.css で完結させる (上の土台と同じ方針)。 */
#diverIdLoginModal .modal-actions { justify-content: center; }
.profile-avatar-edit:hover .avatar-upload-overlay { opacity: 1 !important; }

/* ---- モバイルの下ナビ (2026-10-10 E2・shell.js の renderBottomNav) ----
   768px 以下だけ。sticky で下端に留め、フッターはその上に来る (ADR-14 D8)。
   z-index 80 = サイドの覆い (styles.css 90) より下 — ☰ で開いたサイドが下ナビに被る */
.v-bottomnav { display: none; }
@media (max-width: 768px) {
  .v-plain .v-bottomnav {
    display: flex; position: sticky; bottom: 0; z-index: 80;
    background: var(--v-side, #fbfbfd); border-top: 1px solid var(--v-line, #dcdce4);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .v-plain .v-bottomnav > a, .v-plain .v-bottomnav > button {
    flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--v-ink3, #8a8a96); text-decoration: none;
    background: none; border: 0; cursor: pointer; font-family: inherit;
  }
  .v-plain .v-bottomnav > button { font-size: 18px; color: var(--v-ink, #23232a); }
  .v-plain .v-bottomnav > a.on { color: var(--v-ink, #23232a); font-weight: 700; }
}

/* ---- ヘッダの検索欄 (2026-10-10 E1・shell.js の .vh-search) ----
   PC はロゴの右に欄。スマホ幅 (768px 以下) は欄を畳み、🔍 (/search へのリンク) を出す */
.v-plain .vh-search { flex: 1 1 auto; max-width: 420px; margin: 0 16px; display: flex; }
.v-plain .vh-search input {
  width: 100%; height: 34px; padding: 0 12px; font-size: 13px;
  border: 1px solid var(--v-line, #dcdce4); border-radius: 17px; background: var(--v-card, #fff); color: var(--v-ink, #23232a);
}
.v-plain .vh-search input:focus { outline: 2px solid var(--v-ink2, #5a5a66); outline-offset: 1px; }
.v-plain .vh-search-btn { display: none; color: var(--v-ink, #23232a); padding: 4px 6px; }
@media (max-width: 768px) {
  .v-plain .vh-search { display: none; }
  .v-plain .vh-search-btn { display: inline-flex; align-items: center; margin-left: auto; }
}
.search-head { margin: 4px 0 16px; font-size: 14px; color: var(--v-ink2, #5a5a66); }
.search-sec { margin-bottom: 28px; }
.search-sec > h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }