/* 信頼の輪商店街™️ カスタムスタイル */

/* ボタンスタイル */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 cursor-pointer inline-flex items-center justify-center;
}

.btn-primary {
  @apply bg-trust-blue text-white hover:bg-opacity-90 active:scale-95;
}

.btn-outline {
  @apply border-2 border-trust-blue text-trust-blue hover:bg-trust-blue hover:text-white;
}

.btn-outline-white {
  @apply border-2 border-white text-white hover:bg-white hover:text-trust-blue;
}

.btn-glass {
  @apply bg-white/20 text-white border border-white/30 backdrop-blur-sm hover:bg-white/30;
}

.btn-success {
  @apply bg-success-green text-white hover:bg-opacity-90;
}

/* カードスタイル */
.card {
  @apply rounded-lg overflow-hidden;
}

.card-body {
  @apply p-6;
}

.card-title {
  @apply text-lg font-bold mb-4 flex items-center;
}

/* 商店街特有のスタイル */
.shop-card {
  @apply transform transition-all duration-300 hover:scale-105 hover:-translate-y-1;
}

.shop-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* バッジスタイル */
.badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.badge-outline {
  @apply border border-neutral-gray text-neutral-gray;
}

.badge-success {
  @apply bg-success-green text-white;
}

.badge-info {
  @apply bg-trust-blue text-white;
}

/* テキストエリア・インプット */
.textarea, .input {
  @apply px-4 py-2 rounded-lg border;
}

.textarea-bordered, .input-bordered {
  @apply border-neutral-gray bg-base-200 text-base-content focus:border-trust-blue focus:outline-none focus:ring-2 focus:ring-trust-blue/20;
}

/* チャットバブル */
.chat {
  @apply flex mb-4;
}

.chat-start {
  @apply justify-start;
}

.chat-end {
  @apply justify-end;
}

.chat-bubble {
  @apply px-4 py-2 rounded-lg max-w-xs bg-base-100 text-base-content;
}

.chat-bubble-primary {
  @apply bg-trust-blue text-white;
}

/* グラデーション背景 */
.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* 信頼DNA系譜のスタイル */
.trust-chain {
  @apply flex items-center justify-center space-x-4 p-6 bg-gradient-to-r from-trust-blue/10 to-creative-purple/10 rounded-lg;
}

.trust-node {
  @apply text-center;
}

.trust-arrow {
  @apply text-2xl text-trust-blue;
}

/* ネットワーク図のスタイル */
#trust-network {
  @apply relative overflow-hidden;
}

#trust-network svg {
  @apply w-full h-full;
}

/* ノードホバーエフェクト */
.network-node {
  @apply cursor-pointer transition-all duration-200;
}

.network-node:hover {
  @apply transform scale-110;
}

/* アニメーション */
.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* スクロールバーカスタマイズ */
#chat-container::-webkit-scrollbar {
  width: 6px;
}

#chat-container::-webkit-scrollbar-track {
  background: #191e24;
}

#chat-container::-webkit-scrollbar-thumb {
  background: #3498DB;
  border-radius: 3px;
}

#chat-container::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
  
  .grid-cols-1 {
    @apply gap-4;
  }
  
  .text-3xl {
    @apply text-2xl;
  }
  
  .shop-card {
    @apply hover:scale-100 hover:translate-y-0;
  }
  
  .btn-glass {
    @apply text-sm px-3 py-1;
  }
}

/* 信頼度カラースケール */
.trust-level-high {
  @apply text-success-green;
}

.trust-level-medium {
  @apply text-warning-yellow;
}

.trust-level-low {
  @apply text-danger-red;
}

/* 相関図フィルター */
.layout-controls {
  @apply flex space-x-2;
}

.layout-controls .btn-sm {
  @apply px-3 py-1 text-sm;
}

/* マッチング結果のアニメーション */
.matching-result {
  @apply transform transition-all duration-500 opacity-0 translate-y-4;
}

.matching-result.show {
  @apply opacity-100 translate-y-0;
}

/* 店舗カテゴリ別カラー */
.category-beauty {
  @apply border-l-4 border-l-creative-purple;
}

.category-creative {
  @apply border-l-4 border-l-warm-orange;
}

.category-it {
  @apply border-l-4 border-l-trust-blue;
}

/* ツールチップ */
.tooltip {
  @apply absolute bg-gray-800 text-white text-xs rounded py-1 px-2 z-10 opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
  @apply opacity-100;
}