/* =========================================
   活動（Youtube Gemini要約）
   ========================================= */

:root {
  --af-bg: #f8f9fc;
  --af-card: #ffffff;
  --af-line: #e7eaf2;
  --af-text: #131722;
  --af-muted: #6b7280;
  --af-accent: #fa5252;
  --af-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --af-radius-xl: 20px;
  --af-radius-lg: 16px;
  --af-radius-md: 12px;
}

.activity-feed-section {
  margin-top: 10px;
  margin-bottom: 28px;
  padding: 14px;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius-xl);
  background: linear-gradient(180deg, #fbfbfe 0%, #f6f8fc 100%);
  box-shadow: var(--af-shadow);
}

.activity-feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.activity-feed-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  color: #8b93a6;
  letter-spacing: 0.04em;
}

.activity-feed-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: var(--af-text);
}

/* =========================
   Tabs (life-kpi-tab 風)
========================= */
.activity-feed-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.activity-feed-tabs::-webkit-scrollbar { display: none; }

.activity-tab {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.activity-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .07);
}

.activity-tab:active {
  transform: translateY(0);
}

.activity-tab.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(255,255,255,1);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9) inset,
    0 6px 16px rgba(15, 23, 42, .08);
}

.activity-tab__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tab-color, #94a3b8);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tab-color, #94a3b8) 18%, transparent);
}

.activity-tab__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.activity-feed-status {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--af-muted);
}

.activity-feed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.activity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e8ecf4;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05);
  overflow: hidden;

  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.activity-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.activity-card:hover {
  border-color: #dfe5ef;
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.08);
}

.activity-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 18px 0 0 18px;
  background: var(--card-accent, #fa5252);
}

/* ========= カテゴリ別カード色 ========= */
.activity-card[data-category="子供・教育"] { --card-accent: #f6a5c0; background: linear-gradient(180deg, #fff8fb 0%, #fff 100%); }
.activity-card[data-category="高齢者・福祉"] { --card-accent: #9ed8b5; background: linear-gradient(180deg, #f8fff9 0%, #fff 100%); }
.activity-card[data-category="健康・医療"] { --card-accent: #90caf9; background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); }
.activity-card[data-category="くらし・住まい"] { --card-accent: #b39ddb; background: linear-gradient(180deg, #faf8ff 0%, #fff 100%); }
.activity-card[data-category="デジタル・最新技術"] { --card-accent: #80cbc4; background: linear-gradient(180deg, #f7fffe 0%, #fff 100%); }
.activity-card[data-category="文化・芸術"] { --card-accent: #c5b3ff; background: linear-gradient(180deg, #faf8ff 0%, #fff 100%); }
.activity-card[data-category="スポーツ"] { --card-accent: #ffd180; background: linear-gradient(180deg, #fffaf3 0%, #fff 100%); }
.activity-card[data-category="交通"] { --card-accent: #90caf9; background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); }
.activity-card[data-category="産業・仕事"] { --card-accent: #ffcc80; background: linear-gradient(180deg, #fffaf4 0%, #fff 100%); }
.activity-card[data-category="防災"] { --card-accent: #ffab91; background: linear-gradient(180deg, #fff8f6 0%, #fff 100%); }
.activity-card[data-category="環境・自然"] { --card-accent: #a5d6a7; background: linear-gradient(180deg, #f8fff8 0%, #fff 100%); }
.activity-card[data-category="観光"] { --card-accent: #ffe082; background: linear-gradient(180deg, #fffdf6 0%, #fff 100%); }
.activity-card[data-category="インフラ・まちづくり"] { --card-accent: #b0bec5; background: linear-gradient(180deg, #fafbfd 0%, #fff 100%); }
.activity-card[data-category="水道・下水道"] { --card-accent: #81d4fa; background: linear-gradient(180deg, #f6fcff 0%, #fff 100%); }

.activity-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.activity-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* =========================
   Chips（カテゴリは life-kpi-tab 風）
========================= */
.activity-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.86);
  color: #334155;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
  backdrop-filter: blur(4px);
}

.activity-chip.category {
  gap: 6px;
}

.activity-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tab-color, var(--card-accent, #94a3b8));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tab-color, var(--card-accent, #94a3b8)) 18%, transparent);
}

.activity-chip__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .01em;
}

/* status は従来の色味を維持 */
.activity-chip.status {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
}

.activity-chip.status[data-status="発言"] {
  color: #d9485f;
  border-color: #f8c6cf;
  background: #fff5f7;
}

.activity-chip.status[data-status="実施"] {
  color: #0f9f6e;
  border-color: #b8ead4;
  background: #f1fdf7;
}

.activity-chip.status[data-status="検討"] {
  color: #c47b00;
  border-color: #fde2a7;
  background: #fff9eb;
}

.activity-chip.status[data-status="予算化"] {
  color: #2563eb;
  border-color: #c9ddff;
  background: #f4f8ff;
}

.activity-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: #7b8397;
  white-space: nowrap;
  padding-top: 2px;
}

.activity-card-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
  color: var(--af-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-card-text {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-card-bottom {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.activity-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #e4e8f0;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  transition: 0.18s ease;
}

.activity-link:hover {
  background: #fafbfd;
}

.activity-feed-empty,
.activity-feed-loading {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed #dde3ee;
  background: #fbfcfe;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.activity-feed-sentinel {
  width: 100%;
  height: 2px;
  margin-top: 2px;
}

.activity-skeleton {
  min-height: 238px;
  border-radius: 18px;
  border: 1px solid #e8ecf4;
  background: linear-gradient(90deg, #f7f8fb 25%, #eef1f6 37%, #f7f8fb 63%);
  background-size: 400% 100%;
  animation: activityShimmer 1.4s ease infinite;
}

@keyframes activityShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 900px) {
  .activity-feed-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .activity-feed-section { padding: 12px; }
  .activity-feed-title { font-size: 18px; }

  .activity-card {
    padding: 12px;
    border-radius: 16px;
  }

  .activity-card-title { font-size: 16px; }
  .activity-card-text { font-size: 12px; line-height: 1.68; }
}