/* =========================================
   アイコン群タップで開くユーザー一覧モーダル（shared/_user_list_modal）

   どの画面からでも開くため application.html.erb で常時読み込む。
   プロフィール画面の .profile-dialog*（profiles.css）と同じ見た目だが、あちらは
   profiles#show の content_for :head でしか読み込まれないので、意図的に別クラスで持つ。

   注意: --accent / --line / --muted / --radius などはページ別CSS（profiles.css・notes.css）が
   それぞれの :root で定義しているページ単位のトークンで、グローバルではない。
   このファイルは全画面で読まれるので、値は .ulm-dialog 自身に --ulm-* として持ち、
   ページ側の変数には依存しない（かつページ側を上書きもしない）。

   このファイルは yield :head より前に読まれるので、同詳細度ならページ別CSSが勝つ。
   トリガー側のリセットは既存クラスを狙うため、詳細度を1段上げてある。
========================================= */

/* <dialog> は UA 既定の margin:auto で上下中央になる。一覧系は画面上部に出したいので
   margin-top を明示し、margin-bottom:auto を残す（左右の auto は継承されて横中央のまま）。 */
.ulm-dialog {
  --ulm-accent: #f56b6b;
  --ulm-accent-3: #ffd2d2;
  --ulm-accent-4: #ffe4e4;
  --ulm-text: #111;
  --ulm-muted: #8d8d95;
  --ulm-line: #f0f0f2;

  border: none;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--ulm-text);
  padding: 0;
  width: min(92vw, 380px);
  max-height: 70svh;
  overflow: hidden;
  margin-top: var(--popup-top-offset, 10vh);
  margin-bottom: auto;
}

.ulm-dialog[open] {
  display: flex;
  flex-direction: column;
}

.ulm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.ulm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ulm-line);
  flex-shrink: 0;
}

.ulm-title {
  font-size: 16px;
  font-weight: 900;
}

.ulm-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--ulm-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* turbo-frame 自体をスクロール領域にする（中の <ul> は高さを持たない） */
.ulm-dialog #user_list_modal_frame {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.ulm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ulm-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ulm-line);
}

.ulm-item:last-child {
  border-bottom: none;
}

.ulm-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}

.ulm-link:hover {
  background: var(--ulm-accent-4);
}

.ulm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--ulm-accent-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ulm-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ulm-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右端：その人がその店舗に付けた総合評価。未評価なら「-.-」が入る。 */
.ulm-score {
  flex-shrink: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ulm-star {
  color: var(--ulm-accent);
}

/* 右端：Feedのいいね一覧だけフォロー／フォロー中ピルを出す。 */
.ulm-follow-btn {
  flex-shrink: 0;
  margin-right: 16px;
  border: none;
  background: var(--ulm-accent);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ulm-follow-btn.is-following {
  background: #fff;
  color: var(--ulm-muted);
  border: 1.5px solid var(--ulm-line);
}

.ulm-follow-btn:disabled {
  opacity: 0.6;
}

.ulm-empty {
  padding: 24px 16px;
  text-align: center;
  color: #8d8d95;
  font-size: 13px;
}

/* モーダルを経由せず URL を直接開いたときだけ見える見出し */
.ulm-page-title {
  margin: 16px;
  font-size: 18px;
  font-weight: 900;
}


/* =========================================
   トリガー側：<button> / role="button" にしたぶんのリセット。
   既存のレイアウト指定（cards.css / detail.css / feed.css）を壊さないよう、
   display 系は宣言しない。
========================================= */

.card-friends-trigger,
.friend-reviewers--tappable,
.rd-score--tappable,
button.feed-post-reaction-summary {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 店舗カード：アバター群と「友人評価」を横に並べる。元の .card-friends-row の gap と同じ値。
   上下 padding ＋ 同量のネガティブマージンで、レイアウトを動かさずタップ領域だけ広げる。 */
.card-friends-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 0;
  margin: -3px 0;
}

/* 履歴にもとづくおすすめカード：アバター群だけがトリガー。cards.css の
   `.discovery-card .friend-reviewers` が margin-top を持っているので margin は触らず、
   padding だけでタップ領域を広げる。 */
.friend-reviewers--tappable {
  padding: 4px 6px;
}

/* Feedのいいね行：アバター20pxで縦に薄いので、同じ手で28px相当まで広げる。
   feed.css の .feed-post-reaction-summary（display:flex 等）より詳細度を1段上げて
   リセットだけ確実に当てる。 */
button.feed-post-reaction-summary {
  padding: 4px 0;
  margin: -4px 0;
}

/* 店舗詳細の友人評価の行（アバター群＋点数が <button>）。レイアウトと
   タップ領域ぶんの padding は detail.css の .rd-page .rd-score--friends 側が持つ
   （行間の margin-top と打ち消し合うので、ここで margin を書くと二重になる）。
   ここではキーボード操作時のフォーカスだけ見えるようにする。 */
.rd-score--tappable:focus-visible {
  outline: 2px solid #f56b6b;
  outline-offset: 4px;
  border-radius: 10px;
}

/* =========================================
   Tasty共通Glass UI（うるうる＋ぷっくり＋ぷるぷる）— ユーザー一覧モーダル分

   **body.<controller>.<action> の接頭は付けない。** user_list_modal.css は
   layouts/application.html.erb から全画面で読み込まれ、このモーダルは検索カード・
   Feedのいいね行・店舗詳細・プロフィールのどこからでも開く共通部品なので、
   接頭を付けると開いた画面によって見た目が変わる。

   レシピは home.css で最初に作った値をそのまま再利用する（新規考案しない）。
   keyframe は application.css の tastyGlassPulse を参照する。

   対象外（→ application.css の【Glass 化の対象にしない要素】）:
   ・.ulm-close — 素が background: none・角丸なし。白いダイアログの上では板が×を囲う
     四角い枠として出るので、タップ演出だけ付ける
   ・.ulm-item / .ulm-link / .ulm-avatar — 一覧の行とアバター（コンテンツ扱い）
   ・.card-friends-trigger / .friend-reviewers--tappable / .rd-score--tappable —
     カード内の「友人の顔」をそのままタップ領域にしたもの（コンテンツ扱い）
========================================= */

/* --- ブランドカラーのボタン（フォロー）：背景色は変えず、光沢ハイライトと
   凸面の影だけ重ねて色味を保ったままガラス感を足す。
   .is-following（白地＋1.5px border）も同じ扱いにしてあるので、
   フォロー中／未フォローの塗りの違いはそのまま残る。 --- */
.ulm-follow-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ulm-follow-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(130% 120% at 20% -25%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.ulm-follow-btn {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.12);
}

/* --- ぷるぷる：タップ時のオーバーシュート（板を敷いていない×にも付ける） --- */
.ulm-follow-btn:active,
.ulm-close:active {
  animation: tastyGlassPulse 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ulm-follow-btn:active,
  .ulm-close:active {
    animation: none;
  }
}