/* pet_share_card.css — JOB 122: Pet Share Card & Tooltip Styles */

/* ── COMPACT CHAT BUBBLE CARD ── */
.pet-share-compact {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.pet-share-compact:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
}

.pet-share-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--pet-element-color, #6366f1);
  border-radius: 2px 0 0 2px;
}

.pet-share-compact-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pet-share-compact-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.pet-share-compact-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pet-share-compact-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pet-share-compact-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-share-compact-rarity {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
  white-space: nowrap;
  flex-shrink: 0;
}

.pet-share-compact-row2 {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-share-compact-skills { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.pet-share-compact-skills span { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#dcecff; }
.pet-share-compact-skills img { width:20px; height:20px; object-fit:contain; }

.pet-share-sep {
  opacity: 0.5;
}

/* ── MODAL TOOLTIP OVERLAY & CONTAINER ── */
.pet-tooltip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  /* Owner 2026-09-08: "co cạnh trên tiến sát rìa trên giao diện" — đổi
     center (canh giữa dọc) sang flex-start (bám sát đỉnh), chỉ chừa đúng
     padding nhỏ làm lề trên. */
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  animation: petTooltipFadeIn 0.2s ease-out;
}

@keyframes petTooltipFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Owner 2026-09-29: popup xem profile Thần Thú (mở từ thẻ chia sẻ trong Chat)
   đang che mờ + làm nhòe (blur) toàn bộ nội dung xung quanh như 1 modal —
   riêng theme Tiên Hiệp chỉ cần hiện nổi lên như các tooltip Trang Bị (không
   che nền). Chỉ đổi phần NỀN của overlay (vẫn giữ để bấm ra ngoài đóng được
   — pointer-events không đổi), không đụng theme kid/pro. */
[data-theme="tien_hiep"] .pet-tooltip-overlay{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.pet-tooltip-card {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px var(--pet-element-glow, rgba(249, 115, 22, 0.2));
  color: #f1f5f9;
  position: relative;
  animation: petTooltipPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

@keyframes petTooltipPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.pet-tooltip-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.pet-tooltip-close:hover {
  background: rgba(239, 68, 68, 0.8);
  transform: rotate(90deg);
}

/* ── HEADER WITH HABITAT BACKGROUND & PET SPRITE ── */
/* Owner 2026-09-08: "thu gọn chiều cao tổng thể để vừa 1 màn hình" — header
   ảnh nền vốn chiếm nhiều nhất (min-height 250px), giảm còn 180px + bớt
   padding trên/dưới. */
.pet-tooltip-header {
  position: relative;
  width: 100%;
  min-height: 180px;
  height: auto;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 12px;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
}

.pet-tooltip-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.65) 60%, rgba(15, 23, 42, 0.95) 100%);
}

.pet-tooltip-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.pet-tooltip-sprite {
  max-height: 105px;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px var(--pet-element-glow, rgba(249, 115, 22, 0.4)));
  transition: transform 0.3s ease;
}

.pet-tooltip-sprite:hover {
  transform: scale(1.05);
}

/* ── MAIN CONTENT BODY ── */
.pet-tooltip-body {
  padding: 10px 18px 16px;
  display: flex;
  flex-direction: column;
  /* Owner 2026-09-08: "rút ngắn khoảng cách giữa các hàng" — khoảng cách
     giữa các khối (tên/tags, Ngũ Hành, EXP, Chỉ Số Sống, Chỉ Số Chiến Đấu)
     14px→8px. */
  gap: 8px;
}

.pet-tooltip-title-section {
  text-align: center;
}

.pet-tooltip-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

.pet-tooltip-species-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.pet-tooltip-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.pet-tooltip-tag {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.pet-tooltip-tag.stage {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.pet-tooltip-tag.condition-healthy {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.pet-tooltip-tag.condition-sick {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.3);
  color: #fde047;
}

.pet-tooltip-tag.condition-coma {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* ── ELEMENTAL MATRIX SECTION ── */
.pet-tooltip-section {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
}

.pet-tooltip-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pet-element-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--pet-element-bg, rgba(249, 115, 22, 0.15));
  color: var(--pet-element-color, #f97316);
  border: 1px solid var(--pet-element-border, rgba(249, 115, 22, 0.3));
}

.pet-element-relations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
}

.pet-element-rel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.4);
  padding: 5px 8px;
  border-radius: 6px;
}

/* ── EXP PROGRESS BAR ── */
.pet-exp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pet-exp-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #cbd5e1;
  font-weight: 600;
}

.pet-exp-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pet-exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── VITALS BARS ── */
.pet-vitals-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Owner 2026-09-08: "5 thanh Chỉ Số Sống ngắn lại 10% để chữ Năng Lượng đủ
   chỗ, không xuống dòng" — cột nhãn 80px→104px (+24px, ~10% bề rộng thanh
   track ước tính), track (1fr) tự co lại đúng phần chênh lệch đó. Thêm
   white-space:nowrap trên nhãn để CHẮC CHẮN không bao giờ xuống dòng dù độ
   rộng thẻ đổi theo màn hình. */
.pet-vital-row {
  display: grid;
  grid-template-columns: 104px 1fr 56px;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
}

.pet-vital-label {
  color: #94a3b8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pet-vital-track {
  height: 6px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 3px;
  overflow: hidden;
}

.pet-vital-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.pet-vital-val {
  text-align: right;
  font-weight: 600;
  color: #e2e8f0;
}

/* ── COMBAT STATS GRID ── */
.pet-combat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.pet-combat-item {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pet-combat-label {
  font-size: 0.75rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pet-combat-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f8fafc;
}

.pet-combat-cp {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.15));
  border-color: rgba(245, 158, 11, 0.3);
  text-align: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}

.pet-combat-cp-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fbbf24;
}

/* ── FOOTER OWNER BAR ── */
.pet-tooltip-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 0 0 16px 16px;
}

.pet-tooltip-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.pet-tooltip-actions {
  display: flex;
  gap: 8px;
}

.pet-tooltip-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pet-tooltip-btn.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.pet-tooltip-btn.primary:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  transform: translateY(-1px);
}

.pet-tooltip-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pet-tooltip-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Element specific variable definitions */
.pet-element-kim {
  --pet-element-color: #fbbf24;
  --pet-element-bg: rgba(251, 191, 36, 0.15);
  --pet-element-border: rgba(251, 191, 36, 0.35);
  --pet-element-glow: rgba(251, 191, 36, 0.25);
}

.pet-element-moc {
  --pet-element-color: #4ade80;
  --pet-element-bg: rgba(74, 222, 128, 0.15);
  --pet-element-border: rgba(74, 222, 128, 0.35);
  --pet-element-glow: rgba(74, 222, 128, 0.25);
}

.pet-element-thuy {
  --pet-element-color: #38bdf8;
  --pet-element-bg: rgba(56, 189, 248, 0.15);
  --pet-element-border: rgba(56, 189, 248, 0.35);
  --pet-element-glow: rgba(56, 189, 248, 0.25);
}

.pet-element-hoa {
  --pet-element-color: #f97316;
  --pet-element-bg: rgba(249, 115, 22, 0.15);
  --pet-element-border: rgba(249, 115, 22, 0.35);
  --pet-element-glow: rgba(249, 115, 22, 0.25);
}

.pet-element-tho {
  --pet-element-color: #c084fc;
  --pet-element-bg: rgba(192, 132, 252, 0.15);
  --pet-element-border: rgba(192, 132, 252, 0.35);
  --pet-element-glow: rgba(192, 132, 252, 0.25);
}

/* PQ-128: 🍀 + % may mắn trên thẻ chat (không thêm ảnh trứng để thẻ nhỏ gọn) */
.pet-share-luck { color:#ffd666; font-weight:800; white-space:nowrap; }
.pet-tooltip-skill-list { display:flex; flex-wrap:wrap; gap:6px; }
.pet-tooltip-skill { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 6px; border-radius:7px; background:rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.2); font-size:11px; }
.pet-tooltip-skill img { width:24px; height:24px; object-fit:contain; border-radius:5px; }
.pet-tooltip-skill b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pet-tooltip-skill em { color:#6ee7b7; font-style:normal; font-size:10px; white-space:nowrap; }