/**
 * Expect UX polish — loading / error / empty / motion
 * Figma モックのトークン（gold / dark）を維持。契約・API 非依存。
 */

/* —— Skeleton —— */
@keyframes expect-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes expect-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes expect-pulse-soft {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes expect-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.expect-skeleton {
  display: grid;
  gap: 10px;
}

.expect-skel {
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(40, 46, 58, 0.9) 0%,
    rgba(70, 78, 96, 0.75) 45%,
    rgba(40, 46, 58, 0.9) 90%
  );
  background-size: 200% 100%;
  animation: expect-shimmer 1.25s ease-in-out infinite;
}

.expect-skel--card {
  height: 88px;
  border: 1px solid rgba(193, 162, 109, 0.18);
}

.expect-skel--ai {
  height: 112px;
  border-radius: 16px;
  border: 1px solid rgba(193, 162, 109, 0.22);
}

.expect-skel--line {
  height: 12px;
  width: 72%;
}

.expect-skel--line-sm {
  height: 10px;
  width: 48%;
}

/* —— State banners —— */
.expect-state {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(193, 162, 109, 0.35);
  background: rgba(20, 24, 32, 0.92);
  color: var(--gold-soft, #e5c78f);
  animation: expect-fade-up 0.28s ease both;
}

.expect-state--error {
  border-color: rgba(220, 120, 100, 0.45);
  background: rgba(48, 22, 18, 0.88);
  color: #f0d0c8;
}

.expect-state--warn {
  border-color: rgba(210, 170, 90, 0.5);
  background: rgba(40, 32, 18, 0.9);
  color: #f0e0c0;
}

.expect-state--empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--muted, #9aa3b2);
}

.expect-state__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.expect-state__msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.92;
}

.expect-state__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.expect-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(193, 162, 109, 0.55);
  background: linear-gradient(180deg, #e5c78f, #c1a26d 55%, #9f7e4a);
  color: #1a1204;
  font-size: 12px;
  font-weight: 700;
  min-height: 34px;
  height: auto;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.expect-btn--ghost {
  background: transparent;
  color: var(--gold-soft, #e5c78f);
}

.expect-btn:active {
  transform: scale(0.98);
}

/* —— Motion: list / cards —— */
.race-item {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  animation: expect-fade-up 0.32s ease both;
}

.race-item:nth-child(2) { animation-delay: 0.03s; }
.race-item:nth-child(3) { animation-delay: 0.06s; }
.race-item:nth-child(4) { animation-delay: 0.09s; }
.race-item:nth-child(5) { animation-delay: 0.12s; }

@media (hover: hover) and (pointer: fine) {
  .race-item:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 199, 143, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }

  .ai-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
  }

  .fav-ai-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 199, 143, 0.5);
  }
}

.race-item:active,
.ai-card:active {
  transform: scale(0.985);
}

.fav-btn {
  transition: transform 0.15s ease, color 0.15s ease;
}

.fav-btn:active {
  transform: scale(1.12);
}

.fav-btn.is-on .fav-star,
.fav-btn[aria-pressed="true"] .fav-star {
  color: var(--gold, #e5c78f);
  filter: drop-shadow(0 0 4px rgba(229, 199, 143, 0.45));
}

.race-search-sheet {
  backdrop-filter: blur(8px);
}

.chip,
.tab-pill {
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.chip:active,
.tab-pill:active {
  transform: scale(0.96);
}

.ai-card {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.ai-card.is-updating .ai-gauge {
  animation: expect-pulse-soft 1s ease-in-out infinite;
}

.ai-gauge {
  transition: --p 0.6s ease;
}

@supports (background: paint(something)) {
  /* custom props transition unsupported everywhere — width bars instead */
}

.score-bar > i {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Analysis / detail 視認性 */
.page-race-detail .score-bar,
.page-analysis .score-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.page-race-detail .score-bar i,
.page-analysis .score-bar i {
  background: linear-gradient(90deg, #c1a26d, #e5c78f);
}

.page-race-detail .score-row b {
  min-width: 2.2em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-soft, #e5c78f);
}

.page-race-detail .radar-box {
  border-color: rgba(229, 199, 143, 0.4);
  background:
    radial-gradient(circle at 50% 50%, rgba(229, 199, 143, 0.16), transparent 62%),
    rgba(12, 16, 24, 0.85);
}

.page-race-detail .honmei-num {
  box-shadow: 0 0 0 2px rgba(229, 199, 143, 0.35);
}

.analysis-summary .pie-chart--lg {
  box-shadow: inset 0 0 0 1px rgba(229, 199, 143, 0.28);
}

.fav-ai-card .pie-chart {
  box-shadow: inset 0 0 0 1px rgba(193, 162, 109, 0.25);
}

.honmei-card {
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.honmei-card.is-ready {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  border-color: rgba(229, 199, 143, 0.42);
}

.honmei-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(11, 16, 24, 0.35);
  pointer-events: none;
  animation: expect-pulse-soft 1.1s ease-in-out infinite;
}

.page-race-detail .screen > * {
  animation: expect-fade-up 0.34s ease both;
}

.page-race-detail .honmei-card { animation-delay: 0.02s; }
.page-race-detail .pace-card { animation-delay: 0.08s; }
.page-race-detail .chart-card { animation-delay: 0.14s; }

/* —— Analysis —— */
.analysis-summary.is-loading .pie-chart {
  animation: expect-pulse-soft 1.1s ease-in-out infinite;
}

.fav-ai-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
  animation: expect-fade-up 0.3s ease both;
}

.pie-chart {
  transition: background 0.45s ease;
}

/* —— Chat —— */
.msg {
  animation: expect-fade-up 0.26s ease both;
}

.msg-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.msg-typing .msg-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 10px 14px;
}

.msg-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-soft, #e5c78f);
  animation: expect-typing-bounce 1s ease-in-out infinite;
}

.msg-typing__dot:nth-child(2) { animation-delay: 0.12s; }
.msg-typing__dot:nth-child(3) { animation-delay: 0.24s; }

.chat-send.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.chat-input-row.is-busy #chatInput {
  opacity: 0.75;
}

.chat-live2d-slot {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(193, 162, 109, 0.4);
  background: rgba(20, 24, 32, 0.65);
  color: var(--muted, #9aa3b2);
  font-size: 11px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.chat-live2d-slot.is-compact {
  border-style: solid;
  border-color: rgba(193, 162, 109, 0.22);
  background: rgba(20, 24, 32, 0.45);
  padding-right: 36px;
}

.chat-live2d-dismiss {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chat-return-row {
  margin: 0 0 8px;
}

.chat-return-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-soft, #e5c78f);
  text-decoration: none;
}

.chat-live2d-slot strong {
  color: var(--gold-soft, #e5c78f);
  font-weight: 700;
}

.chat-live2d-slot__badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(193, 162, 109, 0.45);
  color: var(--gold-soft, #e5c78f);
}

.chip.is-soon,
.chip[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.chip-soon {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, #9aa3b2);
}

.dash-metric[hidden] {
  display: none !important;
}

/* —— Home polish —— */
.page-home .ai-cards.is-loading .ai-card--predict {
  outline: 1px solid rgba(229, 199, 143, 0.25);
}

.favorites-rail:empty + .expect-state,
#favorites .expect-state {
  margin-top: 4px;
}

/* Responsive detail */
@media (max-width: 420px) {
  .page-race-detail .honmei-card {
    grid-template-columns: auto 1fr;
  }

  .page-race-detail .honmei-card .radar-box {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-height: 72px;
  }

  .page-race-detail .pace-track {
    gap: 4px;
  }

  .page-race-detail .pace-dot {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

@media (min-width: 560px) {
  .page-race-detail .screen {
    max-width: 520px;
  }

  .page-analysis .fav-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.race-provenance-wrap {
  margin: 0 0 12px;
}

.race-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.race-provenance-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.race-provenance.is-real .race-provenance-pill:first-child {
  border-color: #3ecf8e;
  color: #3ecf8e;
}

.race-provenance.is-fallback .race-provenance-pill:first-child {
  border-color: #ffb020;
  color: #ffb020;
}

.race-provenance-meta {
  opacity: 0.75;
}

.marks-grid {
  display: grid;
  gap: 8px;
}

.mark-chip {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.mark-chip-symbol {
  font-weight: 700;
  font-size: 18px;
}

.pick-cards {
  display: grid;
  gap: 10px;
}

.pick-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.pick-card-label {
  font-size: 12px;
  opacity: 0.8;
  margin: 0 0 4px;
}

.reason-list {
  margin: 0;
  padding-left: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .expect-skel,
  .race-item,
  .ai-card,
  .msg,
  .honmei-card.is-loading::after,
  .msg-typing__dot,
  .score-bar > i {
    animation: none !important;
    transition: none !important;
  }
}