/* ================================
   CHARACTER POPUP — CLEAN REBUILD
================================ */

/* ---------------- VIDEO ---------------- */

#tab-video {
  min-height: 360px;
}

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

#charVideo {
  width: 100%;
  height: 100%;
  display: block;
}

.video-search {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.video-search input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.video-search button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: #337ab7;
  color: #fff;
  cursor: pointer;
}

/* ---------------- OVERLAY ---------------- */

#characterOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

/* ---------------- POPUP BOX ---------------- */

.character-popup {
  background: #fff;
  width: 92%;
  max-width: 1000px;
  height: 88vh;
  margin: 4vh auto;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ---------------- CLOSE ---------------- */

.popup-close {
  position: absolute;
  top: 14px;
  right: 18px;
  border: none;
  background: none;
  font-size: 28px;
  cursor: pointer;
  color: #555;
}
.popup-close:hover { color: #000; }

/* ---------------- HEADER ---------------- */

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 8px;
}

.popup-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #1f2933;
}

.related-articles {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.related-articles label {
  white-space: nowrap;
  font-weight: 600;
}

.related-articles select {
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 6px;
}

/* ---------------- BODY LAYOUT (CRITICAL) ---------------- */

.popup-body {
  flex: 1;
  display: flex;
  gap: 24px;
  padding: 16px 24px 24px;

  overflow: hidden;   /* ✅ prevents full popup scroll */
  min-height: 0;      /* ✅ flex scroll fix */
}

/* ---------------- LEFT (IMAGE + CHAT) ---------------- */

/* ===== LEFT COLUMN UNIFIED CARD ===== */

.popup-left {
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

/* image card */
#charImage {
  width: 260px;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  background: #eee;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* chat container card */
.chatbox {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}

/* title spacing */
.chat-title {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  text-align: center;
  color: #444;
  font-weight: 600;
}

/* iframe fills card */
.chat-iframe {
  width: 260px;
  height: 200px;
  border: none;
  border-radius: 12px;
  background: #000;
}

/* ---------------- RIGHT ---------------- */

.popup-right {
  flex: 1;
  display: flex;
  flex-direction: column;

  overflow: hidden;
  min-height: 0;
}

/* ---------------- TABS (STICKY) ---------------- */

.popup-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;

  position: sticky;      /* ✅ sticky tabs */
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: 6px;
}

.tab-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn.active {
  background: #337ab7;
  border-color: #337ab7;
  color: #fff;
}

/* ---------------- TAB CONTENT (SCROLL ZONE) ---------------- */

.tab-content {
  flex: 1;
  overflow-y: auto;      /* ✅ ONLY scroll area */
  padding-right: 6px;
  min-height: 0;
}

/* tab behavior */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---------------- TEXT ---------------- */

#charBio, #charNotes {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}

/* ---------------- MAP ---------------- */

#mapTab {
  min-height: 400px;
}

.map-wrapper {
  width: 100%;
  height: 400px;
  background: #eee;
  border-radius: 14px;
  overflow: hidden;
}

#charMap {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------- IFRAME GENERIC ---------------- */

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: none;
  background: #000;
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {
  .popup-body { flex-direction: column; }
  .popup-left { width: 100%; position: static; }
}