/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* タイムライン/グループフィードの投稿一覧。新着投稿の broadcast_prepend を timeline_pill_controller が
   手動でスクロール補正するため、ブラウザ標準の CSS Scroll Anchoring（既定で有効）を無効化する。
   両方が効くと補正が二重にかかり、意図と逆に画面が揺れてしまう。 */
#posts {
  overflow-anchor: none;
}

/* Turbo Drive プログレスバー（ナビゲーション中に上部に表示）。
   デフォルトの青は固定色でテーマと馴染まないので、選択中のアクセント色（--accent）に
   追従させる。淡→濃のグラデーション＋ほのかな発光で「青い棒」感を消し、やわらかい線にする。 */
.turbo-progress-bar {
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #4f46e5) 55%, white) 0%,
    var(--accent, #4f46e5) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #4f46e5) 55%, transparent);
}

/* プルダウン更新インジケータ（pull_to_refresh_controller が transform / opacity を操作）。
   初期は画面外（上）に隠れていて、引いた量に応じて降りてくる。.ready で色づき、.spinning で回る。 */
.ptr-indicator {
  position: fixed;
  top: -44px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--color-white, #fff);
  color: var(--color-slate-400, #94a3b8);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
}
.ptr-indicator svg { width: 20px; height: 20px; }
.ptr-indicator.ready { color: var(--color-indigo-600, #4f46e5); }
.ptr-indicator.spinning svg { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* 長い本文の省略表示（expandable_controller が付け外しする）。
   一覧・タイムラインで長文がカードを圧迫しないよう既定で 10 行に畳む。
   JS 無効時はこのクラスが付かないので全文が読める。 */
.singu-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* DM 送信フォームの貼り付け（conversations#show）。sticky なので通常フローに残り、
   長スレッドのスクロール中だけ下部ナビの上に貼り付く（短スレッドでは自然位置のまま）。
   --fab-bottom-offset は nav-metrics が bottom_nav の実測高さ+12px（safe-area 込み）で
   上書きする＝singu-fab（singu_touch.css）と同運用。JS 未実行時はフォールバック固定式。 */
.dm-form-sticky {
  position: sticky;
  bottom: var(--fab-bottom-offset, calc(env(safe-area-inset-bottom) + 76px));
}