/**
 * 検索チャットページ専用スタイル
 * - 共有クラス（thread-post-chat__ / dify-chat__）は thread-post.css に依存
 * - ページスクロール方式: $log は overflow しない / 下部バーは position:fixed
 */

/* ===== ページ全体 ===== */
.search-chat-page {
  /* 通常ブロックフロー。スクロールはページ自体が担う。 */
}

/* ===== 共通インナー（760px 中央揃え） ===== */
.search-chat-page__inner {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ===== ヒーローコンパクト化（検索後、JS が .is-compact を付与） ===== */
.list-hero {
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.list-hero.is-compact {
  max-height: 80px;
  overflow: hidden;
  padding-block: var(--space-3);
}

.list-hero.is-compact .list-hero__bg {
  opacity: 0.45;
}

.list-hero.is-compact .list-hero__lead {
  display: none;
}

.list-hero.is-compact .list-hero__title {
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .list-hero { transition: none; }
}

/* ===== 絞り込みバンド（sticky-top、検索後に表示） ===== */
.search-chat-page__filter-band {
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  padding: var(--space-2) 0;
}

.search-chat-page__filter-band[hidden] {
  display: none;
}

/* 種別フィルタ行 */
.search-chat-page__filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* 「絞り込む：」のリードラベル */
.search-chat-page__filter-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  flex-shrink: 0;
}

/* ===== 種別フィルタボタン ===== */
.type-filter__btn {
  padding: 5px var(--space-3);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-base-1);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.type-filter__btn.is-active {
  border-color: var(--color-main);
  background: var(--color-main);
  color: var(--color-text-inverse);
}

.type-filter__btn:not(.is-active):hover {
  border-color: var(--color-main);
  color: var(--color-main);
}

/* ===== チャットセクション（グレー背景） ===== */
.search-chat-page__chat {
  background: var(--color-base-2, #F8FAF9);
  /* hero 撤廃に合わせて上余白を縮小。下は固定底バー分を広めに確保 */
  padding: var(--space-4) 0 320px;
  min-height: 60vh;
}

/* ログ: メッセージ間に gap を設けて縦リズムを作る */
.search-chat-page__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ===== 下部固定入力バー ===== */
.search-chat-page__bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(248, 250, 249, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding: var(--space-2) 0 var(--space-3);
  z-index: 40;
}

/* ===== みんながしている質問（しっぽ付き吹き出し横スクロール） ===== */
.search-chat-page__bubbles {
  margin-top: var(--space-3);
}

.search-chat-page__bubbles-label {
  margin: 0 0 var(--space-2) 4px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
}

/* viewport: 両端をマスクでフェードしつつ overflow:hidden */
.search-chat-page__bubbles-viewport {
  overflow: hidden;
  position: relative;
  padding: 8px 0 12px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* track: 2 つの ul を flex で並べ、CSS で左方向へ流す */
.search-chat-page__bubbles-track {
  display: flex;
  width: max-content;
  animation: search-bubbles-marquee 30s linear infinite;
}

.search-chat-page__bubbles-track:hover {
  animation-play-state: paused;
}

@keyframes search-bubbles-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.search-chat-page__bubbles-list {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0 var(--space-3) 0 0;
  list-style: none;
  flex-shrink: 0;
}

.search-chat-page__bubble {
  flex: 0 0 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(8px);
  animation: search-bubble-in 0.35s ease-out forwards;
  animation-delay: calc(var(--bubble-i, 0) * 80ms);
}

/* クローン側はフェードイン不要（即時表示） */
.js-bubbles-list-clone .search-chat-page__bubble {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes search-bubble-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * しっぽ付き吹き出しチップ。
 * クラス名 .search-chat-page__tag-chip は維持（既存 search-chat.js のクリック委譲ハンドラと互換）。
 */
.search-chat-page__tag-chip {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  background: var(--color-base-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #1a1a1a);
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.search-chat-page__tag-chip::before,
.search-chat-page__tag-chip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.search-chat-page__tag-chip::before {
  bottom: -8px;
  left: 18px;
  border-width: 8px 8px 0 0;
  border-color: var(--color-border, #e5e7eb) transparent transparent transparent;
}

.search-chat-page__tag-chip::after {
  bottom: -7px;
  left: 19px;
  border-width: 7px 7px 0 0;
  border-color: var(--color-base-1) transparent transparent transparent;
}

.search-chat-page__tag-chip:hover {
  border-color: var(--color-main);
  color: var(--color-main);
  background: var(--color-base-2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.search-chat-page__tag-chip:hover::before {
  border-top-color: var(--color-main);
}

.search-chat-page__tag-chip:hover::after {
  border-top-color: var(--color-base-2);
}

.search-chat-page__tag-chip:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .search-chat-page__bubble {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .search-chat-page__bubbles-track {
    animation: none;
  }
  .search-chat-page__bubbles-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .search-chat-page__tag-chip {
    transition: none;
  }
  .search-chat-page__tag-chip:hover {
    transform: none;
  }
}

/* 「別の質問をしてみる」入力バー上の小見出し */
.search-chat-page__rerun-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  margin: 0 0 var(--space-1);
}

.search-chat-page__rerun-label[hidden] {
  display: none;
}

/* ===== 検索フォーム ===== */
.search-chat-page__form .thread-post-chat__input-bar {
  align-items: center;
}

.search-chat-page__input {
  flex: 1;
  background: var(--color-base-1);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-full, 9999px);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base, 1rem);
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease;
}

.search-chat-page__input:focus {
  border-color: var(--color-main);
}

.search-chat-page__input::placeholder {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
}

/* テキストエリア下のメタ表示
 * 「1日の残り検索回数：9/10回 ・ 質問文の文字数制限：18/200文字まで」
 *  - PC: 1 行（「・」区切り）
 *  - SP: 2 行（区切りを隠して縦並び）
 *  - 残り 1 → amber、残り 0 → red、文字数オーバー → red bold
 */
.search-chat-page__counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 6px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  margin-top: 4px;
  padding-right: var(--space-1);
  line-height: 1.6;
}

.search-chat-page__counter-rate,
.search-chat-page__counter-chars {
  white-space: nowrap;
}

.search-chat-page__counter-sep {
  color: var(--color-border, #d1d5db);
}

/* 残り 1 回（注意） */
.search-chat-page__counter.is-rate-warning .search-chat-page__counter-rate {
  color: var(--color-rank-gold-dark);
  font-weight: 600;
}

/* 残り 0 回（上限到達） */
.search-chat-page__counter.is-rate-zero .search-chat-page__counter-rate {
  color: #dc2626;
  font-weight: 700;
}

/* 文字数オーバー（既存挙動を維持） */
.search-chat-page__counter.is-over .search-chat-page__counter-chars {
  color: #dc2626;
  font-weight: 700;
}

@media (max-width: 480px) {
  .search-chat-page__counter {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px 0;
  }
  .search-chat-page__counter-sep {
    display: none;
  }
}

/* ===== ユーザー吹き出し（右） ===== */
.thread-post-chat__msg--user.search-user-bubble {
  justify-content: flex-end;
}

.search-user-bubble .dify-chat__bubble {
  background: var(--color-main);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
  max-width: 80%;
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  line-height: 1.7;
  padding: var(--space-3) var(--space-4);
}

/* ===== AI 応答バブル ===== */
.search-chat-page .thread-post-chat__msg--assistant .dify-chat__bubble {
  padding: var(--space-3) var(--space-4);
  line-height: 1.8;
}

.search-chat-page .thread-post-chat__msg--assistant .dify-chat__bubble p {
  margin-bottom: var(--space-3);
  line-height: 1.9;
}

.search-chat-page .thread-post-chat__msg--assistant .dify-chat__bubble p:last-child {
  margin-bottom: 0;
}

/* ===== AI イントロ ===== */
.search-ai-intro {
  margin: 0 0 var(--space-4);
  line-height: 1.9;
  color: var(--color-text-primary, #1a1a1a);
  white-space: pre-wrap;
}

/* 考え中バブルから intro へ in-place 差し替えしたときの軽いフェードイン
 * （ドット + skeleton → intro 切替の境目を滑らかにする） */
.search-ai-intro--enter {
  animation: search-intro-fade-in 0.22s ease-out both;
}

@keyframes search-intro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* タイプライター中のキャレット表示 */
.search-ai-intro.is-typing::after {
  content: '|';
  margin-left: 2px;
  color: var(--color-main);
  animation: search-caret 0.9s steps(2) infinite;
}

@keyframes search-caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .search-ai-intro--enter {
    animation: none;
  }
  .search-ai-intro.is-typing::after {
    animation: none;
    opacity: 0;
  }
}

/* ===== 結果カード ===== */
.search-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* intro typewriter 完了後、結果カードをスタガー fade-in。
 * カード0: 500ms, カード1: 1500ms, カード2: 2500ms (= 500ms + N * 1000ms)
 * `--card-i` は JS が各カードのインデックスを inline style で渡す。 */
.search-card--enter {
  opacity: 0;
  transform: translateY(8px);
  animation: search-card-enter 0.45s ease-out forwards;
  animation-delay: calc(500ms + var(--card-i, 0) * 1000ms);
}

@keyframes search-card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .search-card--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
 * 末尾 CTA
 * ----------------------------------------------------------------
 * 「あなたのモヤモヤを、誰かに聞いてもらいませんか？」
 *  - 検索結果（成功 or 0 件）の最後に出す投稿導線。
 *  - 全カードのフェードイン完了後に登場（--cta-card-count を JS が渡す）。
 *  - 動画背景なし・控えめな枠線 + 背景色で「投稿してみよう」を提案。
 *  - 429 / 500 では出さない（仕様）。
 * ============================================================ */
.search-bottom-cta {
  margin-top: 24px;
  padding: 22px 22px 24px;
  background: var(--color-base-2, #F8FAF9);
  border: 1px solid var(--color-border, #e5e7eb);
  border-left: 4px solid var(--color-main);
  border-radius: 12px;
  text-align: center;
  /* stretched-link カードの ::after よりも前面に出す */
  position: relative;
  z-index: 1;
}

.search-bottom-cta__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.search-bottom-cta__lead {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.search-bottom-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--color-main);
  color: var(--color-text-inverse);
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}

.search-bottom-cta__btn:hover,
.search-bottom-cta__btn:focus-visible {
  background: var(--color-main-dark);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

.search-bottom-cta__btn svg {
  flex: 0 0 auto;
}

/* 全カードのフェードイン完了後に CTA を登場させる
 * delay = 500ms + cardCount * 1000ms + 300ms（CTA_AFTER_CARDS_MS）
 * 0 件時は --cta-card-count = 0 で 800ms 後に登場。 */
.search-bottom-cta--enter {
  opacity: 0;
  transform: translateY(8px);
  animation: search-card-enter 0.5s ease-out forwards;
  animation-delay: calc(500ms + var(--cta-card-count, 0) * 1000ms + 300ms);
}

@media (prefers-reduced-motion: reduce) {
  .search-bottom-cta--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .search-bottom-cta {
    padding: 18px 16px 20px;
  }
  .search-bottom-cta__title {
    font-size: 1rem;
  }
  .search-bottom-cta__lead {
    font-size: 0.85rem;
  }
}

.search-card {
  position: relative;
  padding: 14px 18px 12px 22px;
  background: var(--color-base-1);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.search-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* 左 4px アクセントバー（type 色） */
.search-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-border, #e5e7eb);
}

.search-card--thread::before    { background: var(--color-thread-detail-pill-cat-text); }
.search-card--answer::before    { background: #208747; }
.search-card--interview::before { background: #C13D08; }
.search-card--tip::before       { background: #E67300; }

@media (prefers-reduced-motion: reduce) {
  .search-card {
    transition: none;
  }
  .search-card:hover {
    transform: none;
  }
}

.search-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.search-card__type {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
}

.search-card__type--thread    { background: var(--cat-career-bg); color: var(--color-thread-detail-pill-cat-text); }
.search-card__type--answer    { background: #ECFDF5; color: #208747; }
.search-card__type--interview { background: var(--cat-skill-bg); color: #C13D08; }
.search-card__type--tip       { background: var(--cat-hataraki-bg); color: #E67300; }

.search-card__title {
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.6;
  color: var(--color-text-primary, #1a1a1a);
}

/* カード全体クリッカブル: タイトルリンクの ::after でカード全域を覆う */
.search-card__title-link {
  color: inherit;
  text-decoration: none;
}

.search-card__title-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.search-card:hover .search-card__title-link {
  text-decoration: underline;
}

.search-card__excerpt {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #6b7280);
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.8;
}

/* .search-card__link / .search-card__read は削除済み（カード全体クリッカブル化のため） */

/* 体験談カードの「親相談」文脈補完テキスト */
.search-card__via {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  margin: 4px 0 var(--space-2);
  line-height: 1.5;
}

/* 体験談0件スレッドの末尾CTA（控えめ表記） */
.search-card__cta-line {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #6b7280);
  margin: var(--space-2) 0 0;
}

.search-card__cta-inline {
  position: relative;
  z-index: 1; /* stretched link より前面に出す */
  color: var(--color-main);
  font-weight: 700;
  text-decoration: none;
}

.search-card__cta-inline:hover { text-decoration: underline; }

/* ===== もっと見るボタン ===== */
.search-load-more-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5, 20px);
}

.search-load-more {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  border: 1.5px solid var(--color-main);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-base-1);
  color: var(--color-main);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.search-load-more:hover {
  background: var(--color-main);
  color: var(--color-text-inverse);
}

.search-load-more:disabled {
  opacity: 0.6;
  cursor: progress;
}

.search-load-more--article {
  border-color: var(--color-border-strong, #d1d5db);
  color: var(--color-text-primary, #1a1a1a);
}

.search-load-more--article:hover {
  background: var(--color-text-primary, #1a1a1a);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary, #1a1a1a);
}

/* ===== エラー・空結果 ===== */
.search-chat-error {
  color: #dc2626;
  margin: 0 0 var(--space-2);
}

.search-chat-hint {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0;
  line-height: 1.8;
}

.search-chat-hint a {
  color: var(--color-main);
  font-weight: 700;
}

.search-chat-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background-color: var(--color-main);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.search-chat-signup-btn:hover {
  background-color: var(--color-main-dark);
  transform: translateY(-1px);
}

/* ===== タイピング演出: 3点バウンドドット + スケルトンカード ===== */
.search-chat-typing-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

/* 3点ドット（波風アニメ） */
.search-chat-typing-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 14px;
}

.search-chat-typing-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-main, #208747);
  opacity: 0.65;
  animation: search-chat-typing-wave 1.4s ease-in-out infinite;
}

.search-chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.search-chat-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.search-chat-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes search-chat-typing-wave {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.55; }
  30%           { transform: translateY(-6px); opacity: 1;    }
}

/* AIアバターの揺れ（タイピング中だけ縦に bob） */
.search-chat-avatar--pulse {
  animation: search-chat-avatar-sway 2.2s ease-in-out infinite;
}

@keyframes search-chat-avatar-sway {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* スケルトンカード */
.search-chat-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-chat-skeleton__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.search-chat-skeleton__card:first-child {
  border-top: none;
  padding-top: 0;
}

.search-chat-skeleton__line {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: search-chat-shimmer 1.4s linear infinite;
}

.search-chat-skeleton__line--badge { width: 60px;  height: 16px; border-radius: var(--radius-full, 9999px); }
.search-chat-skeleton__line--title { width: 70%;   height: 14px; }
.search-chat-skeleton__line--body  { width: 100%;  height: 10px; }
.search-chat-skeleton__line--body.short { width: 60%; }
.search-chat-skeleton__line--cta   { width: 90px;  height: 12px; margin-top: 4px; }

@keyframes search-chat-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== アクセシビリティ: prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .search-chat-typing-dots span,
  .search-chat-avatar--pulse,
  .search-chat-skeleton__line {
    animation: none;
  }
  .search-chat-typing-dots span { opacity: 0.85; }
}

/* ===== AI アバター（画像が無いときのグラデーション fallback） ===== */
.search-chat-ai-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-main), var(--color-accent-1, #0FBD66));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: 12px;
  font-weight: 700;
}

/* ===== モバイル調整 ===== */
@media (max-width: 640px) {
  /* 横スクロールリストの内余白：エッジ張り付き回避 */
  .search-chat-page__bubbles-list {
    padding-left: 12px;
    padding-right: 12px;
  }

  .search-chat-page__tag-chip {
    max-width: 240px;
  }

  /* スマホは chat section の下パディングを少し縮める */
  .search-chat-page__chat {
    padding-bottom: 280px;
  }
}