/* =============================================================================
   letters_nav.css
   index.php の「キャラからの手紙」ボタン専用スタイル。
   （ログイン中インジケーターとの横並びの行、封筒ボタン、未読バッジ、アニメーション）

   style10.css の :root 変数（--color-surface 等）と、[hidden]{display:none !important}
   を前提にする。style10.css より後に読み込むこと。
   ============================================================================= */

/* ログイン中インジケーターと「キャラからの手紙」ボタンを横並びにする行。
   表示/非表示は、この行全体の hidden 属性だけで切り替える
   （style10.css の [hidden]{display:none !important} が効くので、display:flex があっても消える） */
.login-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}

.login-status-row .login-status {
  margin: 0; /* 行の余白は login-status-row 側で持つ */
}

/* 「キャラからの手紙」ボタン：login-status とは別の、目立つ独立したボタン。
   「みんなが作ったキャラ」タブと同じ考え方（グラデーションをゆっくり動かす）で、
   配色・周期・傾きを変えて、重ならず、浮かないようにしている。
   琥珀 → ピンク → 薄い紫：タブとピンクを共有しつつ、手紙らしい暖かさを出す。 */
.letters-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(120deg, #ffb26b, #ff7eb3 55%, #a98af5);
  background-size: 180% 180%;
  animation: letters-nav-btn-shift 5.5s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(255, 126, 179, 0.38);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.letters-nav-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* 封筒のアイコン（SVG。currentColor で文字色＝白になる） */
.letters-nav-btn__icon {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* 未読があるときだけ、封筒がときどき小さく揺れる（JSが letters-nav-btn--unread を付ける） */
.letters-nav-btn--unread .letters-nav-btn__icon {
  transform-origin: 50% 60%;
  animation: letters-nav-btn-wiggle 3.6s ease-in-out infinite;
}

@keyframes letters-nav-btn-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes letters-nav-btn-wiggle {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(-12deg); }
  86% { transform: rotate(10deg); }
  90% { transform: rotate(-7deg); }
  94% { transform: rotate(4deg); }
}

/* OSで「視差効果を減らす」設定の人には、動きをすべて止める（既存のタブと同じ扱い） */
@media (prefers-reduced-motion: reduce) {
  .letters-nav-btn,
  .letters-nav-btn--unread .letters-nav-btn__icon {
    animation: none;
  }
}

/* 未読件数の赤いバッジ（0件のときは hidden で非表示） */
.letters-nav-btn__count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-surface);
}