@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
  height: 100dvh;
}

/* iPhoneホームバー対応 */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Turboプログレスバー */
.turbo-progress-bar {
  background: #1a1a2e;
  height: 3px;
}

/* ページ遷移フェード */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: fadeIn 0.15s ease-out;
}

/* ドロワーのスムーズな開閉はすでにtransitionで対応済み */

/* カードホバーのリフトアップ */
.card-hover {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* ボタンのpress感 */
button:active,
input[type="submit"]:active {
  transform: scale(0.98);
}

/* 新着会話アイテムのハイライト */
@keyframes highlightFade {
  0% {
    background-color: rgba(124, 58, 237, 0.08);
  }
  100% {
    background-color: transparent;
  }
}

.conversation-highlight {
  animation: highlightFade 2s ease-out forwards;
}