/* Tupalish 自訂樣式 */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-bounce-slow { animation: bounce-slow 3.5s ease-in-out infinite; }

/* 篩選按鈕 */
.filter-btn, .zone-btn, .cat-btn, .ai-tab {
  color: #64748b;
  background: #fff;
  transition: all .2s;
}
.filter-btn.active { background: #f97316; color: #fff; border-color: #f97316 !important; }
.zone-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6 !important; }
.cat-btn.active { background: #1e293b !important; color: #fff; }
.ai-tab.active { background: #10b981; color: #fff; border-color: #10b981 !important; }

/* Pro 教學專區(深色模式) */
.pro-tab {
  color: #94a3b8;
  background: #1e2338;
  border: 1px solid #2d3452;
  transition: all .2s;
  white-space: nowrap;
}
.pro-tab:hover { color: #e2e8f0; border-color: #f97316; }
.pro-tab.active {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
  box-shadow: 0 4px 14px rgba(249,115,22,.4);
}

.role-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  color: #cbd5e1;
  background: transparent;
  padding: .45rem .7rem;
  border-radius: .5rem;
  font-size: .82rem;
  transition: all .15s;
}
.role-opt:hover { background: #2d3452; color: #fff; }
.role-opt.active {
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(139,92,246,.45);
}

/* AI 對話泡泡 */
.chat-msg-ai, .chat-msg-user {
  max-width: 85%;
  padding: .65rem 1rem;
  border-radius: 1.2rem;
  line-height: 1.6;
}
.chat-msg-ai {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: .3rem;
  margin-right: auto;
}
.chat-msg-user {
  background: #10b981;
  color: #fff;
  border-bottom-right-radius: .3rem;
  margin-left: auto;
  text-align: right;
}