/* =========================================================
   DSE V7.8 — SMART INTELLIGENCE, REMINDER & REVENUE CENTER
   Semua selector baru di-scope agar desain V7.7 tetap terkunci.
========================================================= */

/* FIX DOKUMENTASI: media utama selalu tampil utuh, tidak dipotong. */
.documentation-card .documentation-cover {
  aspect-ratio: auto !important;
  min-height: 220px;
  max-height: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top right, rgba(245,215,110,.24), transparent 34%),
    linear-gradient(145deg, #e8f4ee, #f8fbf9) !important;
}
.documentation-card .documentation-cover > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
.documentation-card:hover .documentation-cover > img { transform: none !important; }
.documentation-card .documentation-cover > video {
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain !important;
  background: #061b15;
}
.documentation-thumb img,
.documentation-thumb video { object-fit: contain !important; background: #edf6f2; }
.v63-lightbox [hidden] { display: none !important; }
.v63-lightbox-inner { width: min(100%, 1180px) !important; height: min(92dvh, 920px) !important; }
.v63-lightbox-image-wrap { overflow: hidden; }
.v63-lightbox-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.v63-lightbox-document { position: relative; z-index: 3; }

/* Shared V7.8 surfaces */
.v78-page { --v78-green:#075c45; --v78-green-2:#0b7a5c; --v78-gold:#d3aa35; --v78-soft:#eef8f4; }
.v78-page .v78-hero,
.v78-panel {
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 42px rgba(2,44,34,.09);
  backdrop-filter: blur(13px);
}
.v78-page .v78-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  color: #fff;
  background:
    linear-gradient(110deg,rgba(2,44,34,.97),rgba(6,95,70,.84)),
    url('../img/background.jpg') center/cover;
}
.v78-page .v78-hero::after {
  content:""; position:absolute; width:220px; height:220px; right:-72px; top:-82px;
  border:1px solid rgba(244,211,94,.34); border-radius:50%; box-shadow:0 0 0 35px rgba(244,211,94,.07);
}
.v78-page .v78-hero > * { position:relative; z-index:1; }
.v78-kicker { display:block; color:#f5d76e; font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.v78-page h2 { margin:7px 0 7px; color:inherit; font-size:clamp(1.35rem,4vw,2rem); line-height:1.2; }
.v78-page .v78-hero p { max-width:740px; margin:0; color:rgba(255,255,255,.80); font-size:.75rem; line-height:1.7; }
.v78-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.v78-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.v78-panel { padding:22px; }
.v78-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.v78-panel-head h3 { margin:0 0 4px; color:#075c45; font-size:1.05rem; }
.v78-panel-head p { margin:0; color:#71857d; font-size:.67rem; line-height:1.55; }
.v78-metric { padding:15px; border:1px solid rgba(7,92,69,.12); border-radius:17px; background:linear-gradient(145deg,#f8fcfa,#eef8f4); }
.v78-metric span,.v78-metric small { display:block; color:#71857d; font-size:.57rem; }
.v78-metric span { font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.v78-metric strong { display:block; margin:5px 0 2px; color:#173f34; font-size:1.25rem; }
.v78-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.v78-btn {
  min-height:42px; padding:0 16px; border:0; border-radius:13px; cursor:pointer;
  font:800 .66rem/1 Poppins,sans-serif; letter-spacing:.02em;
}
.v78-btn-primary { color:#fff; background:linear-gradient(135deg,#075c45,#0c9a70); box-shadow:0 10px 22px rgba(5,112,82,.18); }
.v78-btn-gold { color:#173f34; background:linear-gradient(135deg,#d3aa35,#f6da69); }
.v78-btn-soft { color:#075c45; background:#eaf6f1; border:1px solid rgba(7,92,69,.12); }
.v78-btn-danger { color:#9b2c22; background:#fff0ee; }
.v78-field { display:grid; gap:7px; }
.v78-field label { color:#315c50; font-size:.63rem; font-weight:800; }
.v78-input,.v78-select,.v78-textarea {
  width:100%; min-height:48px; padding:11px 14px; border:1px solid rgba(7,92,69,.18); border-radius:14px;
  color:#173f34; background:rgba(255,255,255,.92); font:500 .73rem Poppins,sans-serif; outline:none;
}
.v78-textarea { min-height:105px; resize:vertical; }
.v78-input:focus,.v78-select:focus,.v78-textarea:focus { border-color:#0c9a70; box-shadow:0 0 0 4px rgba(12,154,112,.10); }
.v78-note { padding:12px 14px; border-left:4px solid #d3aa35; border-radius:12px; color:#5d6e67; background:#fff9df; font-size:.64rem; line-height:1.6; }
.v78-empty { padding:30px 18px; border:1px dashed rgba(7,92,69,.20); border-radius:18px; color:#74877f; background:rgba(248,252,250,.8); text-align:center; font-size:.68rem; }
.v78-list { display:grid; gap:10px; }
.v78-list-card { padding:14px; border:1px solid rgba(7,92,69,.12); border-radius:17px; background:#fff; }
.v78-list-card strong { color:#174539; }
.v78-list-card p { margin:5px 0 0; color:#71857d; font-size:.64rem; line-height:1.55; }
.v78-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; color:#17624e; background:#e9f7f1; font-size:.56rem; font-weight:800; }
.v78-pill.warn { color:#8a5c00; background:#fff6d8; }
.v78-pill.danger { color:#a4362a; background:#fff0ed; }
.v78-pill.dark { color:#fff; background:#075c45; }

/* Assistant */
.v78-assistant-shell { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:16px; margin-top:16px; }
.v78-chat { min-height:520px; display:grid; grid-template-rows:1fr auto; }
.v78-chat-stream { min-height:390px; max-height:570px; overflow:auto; display:grid; align-content:start; gap:12px; padding:4px 3px 14px; }
.v78-message { max-width:88%; padding:13px 15px; border-radius:18px; font-size:.68rem; line-height:1.62; white-space:normal; }
.v78-message.user { margin-left:auto; color:#fff; background:linear-gradient(135deg,#075c45,#0b8a66); border-bottom-right-radius:5px; }
.v78-message.bot { color:#284c42; background:#eef8f4; border:1px solid rgba(7,92,69,.10); border-bottom-left-radius:5px; }
.v78-message.bot strong { color:#075c45; }
.v78-chat-compose { display:grid; grid-template-columns:1fr auto; gap:9px; padding-top:13px; border-top:1px solid rgba(7,92,69,.10); }
.v78-quick { display:flex; flex-wrap:wrap; gap:7px; }
.v78-quick button { padding:8px 10px; border:1px solid rgba(7,92,69,.13); border-radius:999px; color:#075c45; background:#f3faf7; font:700 .58rem Poppins,sans-serif; cursor:pointer; }

/* Search */
.v78-search-trigger { position:relative; }
.v78-search-trigger svg { width:21px; height:21px; fill:currentColor; }
.v78-search-modal { position:fixed; inset:0; z-index:10500; display:none; align-items:flex-start; justify-content:center; padding:8vh 14px 20px; background:rgba(1,18,13,.72); backdrop-filter:blur(7px); }
.v78-search-modal.is-open { display:flex; }
.v78-search-dialog { width:min(760px,100%); max-height:84vh; overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:24px; background:#f8fcfa; box-shadow:0 30px 80px rgba(0,0,0,.34); }
.v78-search-head { display:grid; grid-template-columns:1fr auto; gap:10px; padding:15px; background:linear-gradient(135deg,#064e3b,#08785a); }
.v78-search-head input { min-height:50px; border:0; border-radius:14px; padding:0 15px; font:600 .78rem Poppins,sans-serif; }
.v78-search-close { width:50px; border:1px solid rgba(255,255,255,.25); border-radius:14px; color:#fff; background:rgba(255,255,255,.12); font-size:1.4rem; cursor:pointer; }
.v78-search-results { max-height:65vh; overflow:auto; padding:13px; display:grid; gap:8px; }
.v78-search-result { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; width:100%; padding:12px; border:1px solid rgba(7,92,69,.11); border-radius:15px; background:#fff; text-align:left; cursor:pointer; }
.v78-search-result:hover { border-color:#0c9a70; box-shadow:0 8px 18px rgba(2,44,34,.08); }
.v78-search-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#075c45,#16a37d); font-size:.74rem; font-weight:900; }
.v78-search-copy strong,.v78-search-copy span { display:block; }
.v78-search-copy strong { color:#173f34; font-size:.68rem; }
.v78-search-copy span { color:#75877f; font-size:.58rem; margin-top:2px; }
.v78-search-type { color:#9b7a1d; font-size:.53rem; font-weight:800; text-transform:uppercase; }

/* Reminder */
.v78-reminder-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.v78-reminder-person { display:flex; align-items:center; gap:11px; }
.v78-avatar { width:43px; height:43px; flex:0 0 43px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,#075c45,#16a37d); font-weight:900; }
.v78-reminder-meta strong,.v78-reminder-meta span,.v78-reminder-meta small { display:block; }
.v78-reminder-meta span { color:#9a7515; font-size:.59rem; font-weight:800; margin-top:2px; }
.v78-reminder-meta small { color:#75877f; font-size:.55rem; margin-top:3px; }
.v78-contact-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(170px,.9fr) auto; gap:9px; align-items:end; padding:11px 0; border-bottom:1px solid rgba(7,92,69,.09); }
.v78-contact-row:last-child { border-bottom:0; }
.v78-message-preview { white-space:pre-wrap; padding:15px; border:1px solid rgba(7,92,69,.12); border-radius:16px; color:#33574d; background:#f5fbf8; font-size:.66rem; line-height:1.65; }

/* Sponsor */
.v78-sponsor-slot { margin:16px 0 4px; }
.v78-sponsor-banner { position:relative; overflow:hidden; min-height:180px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(220px,.75fr); align-items:center; gap:18px; padding:24px; border:1px solid rgba(255,255,255,.32); border-radius:25px; color:#fff; background:linear-gradient(110deg,#032c22,#087457); box-shadow:0 20px 50px rgba(2,44,34,.20); }
.v78-sponsor-banner::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 15%,rgba(245,215,110,.25),transparent 33%); pointer-events:none; }
.v78-sponsor-copy,.v78-sponsor-media { position:relative; z-index:1; }
.v78-sponsor-copy h3 { margin:7px 0 5px; font-size:clamp(1.25rem,4vw,1.85rem); color:#fff; }
.v78-sponsor-copy p { margin:0 0 14px; color:rgba(255,255,255,.78); font-size:.68rem; line-height:1.6; }
.v78-sponsor-media { min-height:140px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:18px; background:rgba(255,255,255,.10); }
.v78-sponsor-media img { width:100%; height:100%; max-height:230px; object-fit:contain; }
.v78-sponsor-media .v78-sponsor-fallback { font-size:3.6rem; }
.v78-sponsor-card { overflow:hidden; padding:0; }
.v78-sponsor-card-media { min-height:160px; display:grid; place-items:center; background:linear-gradient(135deg,#eaf6f1,#fff6d7); }
.v78-sponsor-card-media img { width:100%; height:220px; object-fit:contain; }
.v78-sponsor-card-body { padding:15px; }
.v78-sponsor-card-body h4 { margin:5px 0; color:#075c45; }
.v78-sponsor-card-body p { color:#71857d; font-size:.62rem; }
.v78-upload-preview { min-height:130px; display:grid; place-items:center; overflow:hidden; border:1px dashed rgba(7,92,69,.22); border-radius:16px; background:#f4faf7; }
.v78-upload-preview img { max-width:100%; max-height:230px; object-fit:contain; }
.v78-revenue-status { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }

@media (max-width:900px) {
  .v78-assistant-shell,.v78-sponsor-banner { grid-template-columns:1fr; }
  .v78-grid-3 { grid-template-columns:1fr 1fr; }
  .v78-sponsor-media { min-height:110px; }
}
@media (max-width:720px) {
  .documentation-grid { grid-template-columns:1fr !important; }
  .documentation-card .documentation-cover { min-height:0; }
  .v63-lightbox { padding:8px !important; }
  .v63-lightbox-inner { height:94dvh !important; }
  .v63-lightbox-close { top:6px !important; right:6px !important; }
  .v63-lightbox-nav.prev { left:4px !important; }
  .v63-lightbox-nav.next { right:4px !important; }
  .v78-grid,.v78-grid-3 { grid-template-columns:1fr; }
  .v78-panel { padding:17px; }
  .v78-page .v78-hero { padding:23px 19px; }
  .v78-assistant-shell { grid-template-columns:1fr; }
  .v78-chat { min-height:470px; }
  .v78-message { max-width:94%; }
  .v78-chat-compose { grid-template-columns:1fr; }
  .v78-reminder-card { grid-template-columns:1fr; }
  .v78-contact-row { grid-template-columns:1fr; }
  .v78-sponsor-banner { padding:20px; }
  .v78-search-modal { padding-top:4vh; }
}


/* =========================================================
   DSE V7.8.1 — MOBILE ASSISTANT SCROLL FIX
   Menghilangkan nested-scroll trap pada area chat di HP.
   Halaman kembali memakai scroll utama aplikasi sehingga
   kolom pertanyaan dan tombol TANYAKAN selalu dapat dicapai.
========================================================= */
#assistantPage {
  scroll-behavior: smooth;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}
#assistantPage .v78-assistant-shell,
#assistantPage .v78-chat,
#assistantPage .v78-chat-stream,
#assistantPage .v78-chat-compose {
  min-width: 0;
}

@media (max-width:720px) {
  #assistantPage {
    padding-bottom: max(118px, calc(88px + env(safe-area-inset-bottom)));
  }
  #assistantPage .v78-assistant-shell {
    margin-bottom: 18px;
  }
  #assistantPage .v78-chat {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  #assistantPage .v78-chat-stream {
    min-height: 220px;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }
  #assistantPage .v78-chat-compose {
    grid-template-columns: minmax(0,1fr) 112px;
    align-items: stretch;
    position: relative;
    z-index: 2;
    padding-bottom: 3px;
  }
  #assistantPage .v78-chat-compose .v78-input,
  #assistantPage .v78-chat-compose .v78-btn {
    min-height: 49px;
  }
  #assistantPage .v78-chat-compose .v78-btn {
    width: 100%;
    padding-inline: 10px;
    white-space: nowrap;
  }
}

@media (max-width:360px) {
  #assistantPage .v78-chat-compose {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   DSE V7.8.2 — REMINDER ACTION & CONTACT PERSISTENCE FIX
========================================================= */
#reminderPage {
  padding-bottom: max(118px, calc(88px + env(safe-area-inset-bottom)));
  touch-action: pan-y;
}
#reminderPage .v78-btn,
#v78ReminderPreviewModal .v78-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(7,92,69,.12);
}
#reminderPage .v78-btn:disabled {
  opacity: .52;
  cursor: not-allowed;
}
#reminderPage .v78-panel-head {
  position: relative;
  z-index: 2;
}
.v78-contact-sync-status {
  display: block;
  margin-top: 7px;
  color: #71857d;
  font-size: .56rem;
  line-height: 1.45;
}
.v78-contact-sync-status.pending { color:#8a5c00; }
.v78-contact-sync-status.success { color:#08785a; font-weight:700; }
.v78-contact-sync-status.error { color:#a4362a; font-weight:700; }
#v78ContactList .v78-contact-row {
  scroll-margin-top: 120px;
}
#v78ContactList .v78-contact-phone:invalid {
  border-color:#d56c5e;
}
@media (max-width:720px) {
  #reminderPage .v78-panel-head { align-items: stretch; flex-direction: column; }
  #reminderPage .v78-panel-head > .v78-btn { width:100%; min-height:48px; }
  #reminderPage .v78-reminder-card .v78-actions { display:grid; grid-template-columns:1fr 1fr; }
  #reminderPage .v78-reminder-card .v78-actions .v78-btn-primary { grid-column:1 / -1; }
  #v78ReminderPreviewModal .v78-search-dialog { max-height:92dvh; }
  #v78ReminderPreviewModal .v78-search-results { padding-bottom:max(24px, env(safe-area-inset-bottom)); }
}


/* DSE V7.8.5.1 — Contact Recovery Safety */
.v7851-contact-toolbar { justify-content:flex-end; max-width:100%; }
.v7851-contact-toolbar .v78-btn { white-space:nowrap; }
@media (max-width:720px) {
  #reminderPage .v7851-contact-toolbar { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  #reminderPage .v7851-contact-toolbar .v78-btn { width:100%; min-height:48px; }
  #reminderPage .v7851-contact-toolbar #v78SaveContacts { grid-column:1 / -1; }
}