/* ===== Bottom-sheet caption modal (clean) ===== */

/* ชั้นคลุม */
#caption-modal {
  position: fixed;
  inset: 0;
  display: none; /* ปิดเริ่มต้น */
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 10000; /* ให้ชนะ nav เสมอ */
  transition: opacity 0.2s ease;
}
/* เปิด */
#caption-modal.show {
  display: flex;
  align-items: flex-end; /* ยึดล่างแล้วดันขึ้นด้วย margin ของ .sheet */
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

/* แผ่น bottom-sheet */
#caption-modal .sheet {
  width: min(720px, 100%);
  /* สูงขึ้น: เว้นจากบน ~12vh → sheet สูง ≈ 88vh */
  max-height: calc(100vh - 12vh);
  /* กันชนล่าง: safe-area + เผื่อ navbar โค้ง */
  margin: 0 auto calc(env(safe-area-inset-bottom, 16px) + 12px);
  background: #12171d;
  color: #e5e7eb;
  border-radius: 18px 18px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transform: translateY(18px);
  transition: transform 0.22s ease;
  display: flex; /* ใช้ flex แทนการคำนวณความสูงด้วย vh */
  flex-direction: column;
}
#caption-modal.show .sheet {
  transform: translateY(0);
}

/* ส่วนหัวติดบน */
.sheet-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    #12171d 0%,
    #12171d 70%,
    rgba(18, 23, 29, 0.9) 100%
  );
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.grabber {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  margin: 6px auto 10px;
  background: rgba(255, 255, 255, 0.16);
}
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.title-row h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.close-btn {
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #1a2230;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.close-btn:active {
  transform: translateY(1px);
}

/* ค้นหา */
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: #0f141a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
}
.search-row svg {
  color: #9aa6b2;
}
#caption-search {
  flex: 1;
  background: transparent;
  border: 0;
  color: #e5e7eb;
  outline: none;
}

/* เนื้อหาเลื่อนเอง (คำนวนอัตโนมัติด้วย flex) */
.sheet-body {
  flex: 1; /* กินพื้นที่ที่เหลือ */
  min-height: 0; /* สำคัญ: ให้เลื่อนจริงใน iOS/Chrome */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
}

/* ส่วนท้าย */
.sheet-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 14px 12px;
  background: linear-gradient(
    180deg,
    rgba(18, 23, 29, 0.85),
    rgba(18, 23, 29, 1)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* รายการหมวด/แคปชัน */
.caption-categories {
  display: block;
}

.category-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f141a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #d1d5db;
  padding: 12px;
  margin: 8px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.category-item:hover {
  background: #101a24;
  border-color: rgba(96, 165, 250, 0.35);
}
.category-item .arrow {
  transition: transform 0.15s ease;
}
.category-item[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}

.caption-list {
  padding: 4px 2px 6px 6px;
}
.caption-list[hidden] {
  display: none;
}

.caption-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0c1117;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #d1d5db;
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.caption-item:hover {
  background: #101821;
  border-color: rgba(96, 165, 250, 0.35);
}
.caption-item .cap-text {
  flex: 1;
  padding-right: 12px;
}
.caption-item .pick {
  background: #2f6bff;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}

/* ปุ่มเรียก modal + ปุ่มปิดนุ่ม */
.caption-selector-btn {
  background: #2f6bff;
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.caption-selector-btn:hover {
  filter: brightness(1.05);
}
.close-soft {
  width: 100%;
  background: #1f2937;
  color: #e5e7eb;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* คำใบ้ใต้ input */
.hint {
  color: #8b949e;
  font-size: 12px;
  margin-top: 6px;
  display: inline-block;
}

/* ป้องกันกด nav ซ้อนขณะ modal เปิด */
body.modal-open .curved-nav {
  pointer-events: none;
}
/* เผื่อบางหน้า z-index nav สูงเกินไป */
.curved-nav {
  z-index: 50;
}