html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;background:#f6f8fa;color:#102029}
#map{height:100vh;width:100%}


/* Toolbar */
.controls{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1001;pointer-events:none}
.controls-inner{display:flex;align-items:center;gap:8px;background:#fff;padding:10px;border-radius:14px;box-shadow:0 6px 20px rgba(16,32,41,0.06);pointer-events:auto}
.btn{border:0;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;color:#fff}
#recordBtn{background:#F44336}
#videoBtn{background:#9C27B0}
#sendBtn{background:#2196F3}
#donateBtn{background:#4CAF50}

/* City label */
#detectedCity{position:absolute;left:16px;bottom:86px;background:#fff;padding:8px;border-radius:8px;box-shadow:0 6px 18px rgba(16,32,41,0.06);z-index:1000;font-size:13px}

/* Menu */
.menu{position:absolute;right:12px;top:12px;z-index:1200}
.dropdown{position:absolute;right:12px;top:44px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(16,32,41,0.12);padding:6px;display:none}
.dropdown button{display:block;width:220px;text-align:left;padding:8px;border-radius:6px;border:0;background:transparent;cursor:pointer}


/* Popups */
.popup-wrap{
  width:400px;                /* wider popup */
  max-height:65vh;            /* MUCH taller – fits video without scrolling */
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}

.popup-scroll{
  padding:12px;
  overflow-y:auto;
  flex:1;
  box-sizing:border-box;
  max-height:65vh;     /* ↓ match wrapper height */
}

/* replies */
.reply{
  background:#f7f9fb;
  padding:8px;
  border-radius:8px;
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Make videos always fit and visible */
.popup-scroll video{
  width:100% !important;
  height:auto !important;
  max-height: calc(95vh - 80px); /* auto-resize but never overflow screen */
  border-radius:8px;
  object-fit: contain; /* Prevent cropping */
}


/* Reply bar */
.reply-bar{
  display:flex;
  gap:6px;
  padding:8px;
  border-top:1px solid #e6eef6;
  background:#fff;
  align-items:center;
}

/* NEW: wrapper for input + inline send icon */
.reply-input-wrap{
  position:relative;
  flex:1;
  min-width:0;
}

/* NEW: actual text input inside wrapper */
.reply-input{
  width:100%;
  padding:8px 40px 8px 10px; /* space on right for icon */
  border:1px solid #e6eef6;
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
  outline:none;
}

/* NEW: inline send icon (blue arrow + red dot) */
.inline-send-icon{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* SVG inside inline icon */
.inline-send-icon svg{
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Green glow on hover (desktop / hover devices only) */
@media (hover:hover){
  .inline-send-icon:hover{
    filter:drop-shadow(0 0 6px #2196F3);
    transform:translateY(-50%) scale(1.08);
  }
}

/* Reply button colors */
.record-reply{background:#F44336;color:#fff;}
.video-reply{background:#9C27B0;color:#fff;}
.send-reply{background:#2196F3;color:#fff;}

/* WhatsApp-style voice player */
.voice-player{display:flex;align-items:center;gap:6px;background:#eaf6ff;border-radius:30px;padding:6px 10px;width:220px;}
.voice-btn:focus,
.voice-btn:focus-visible,
.voice-btn::-moz-focus-inner { outline: none !important; box-shadow: none !important; border: none !important;}
.voice-bar{flex:1;height:4px;background:#d0e6fa;border-radius:2px;position:relative;overflow:hidden;}
.voice-progress{position:absolute;top:0;left:0;height:100%;width:0%;background:#2196F3;transition:width .1s linear;}
.voice-wave{display:flex;align-items:flex-end;gap:2px;height:20px;margin-left:4px;}
.wave-bar{width:3px;background:#2196F3;border-radius:2px;height:6px;animation:waveIdle 1s infinite ease-in-out;animation-play-state:paused;}
@keyframes wavePlay{0%,100%{height:4px;}50%{height:18px;}}
@keyframes waveIdle{0%,100%{height:6px;}50%{height:10px;}}
.voice-player.playing .wave-bar{animation:wavePlay .6s infinite ease-in-out;animation-play-state:running;}
.voice-duration{font-size:12px;color:#333;margin-left:4px;width:36px;text-align:right;}

/* ❤️ Smooth heartbeat animation for red map dots (no glow) */
.heartbeat-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff0000;
  animation:heartbeatPulse 2.4s ease-in-out infinite;
}
@keyframes heartbeatPulse{
  0%,100%{ transform:scale(1);   opacity:.95; }
  25%    { transform:scale(1.25);opacity:1; }
  50%    { transform:scale(1.1); opacity:.97; }
  75%    { transform:scale(1.3); opacity:.9; }
}


/* 🔍 Expanding search bar (left of menu) */
.search-form {
  position: absolute;
  top: 12px;
  right: 44px; /* adjust so it sits neatly left of menu */
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 32, 41, 0.12);
  overflow: hidden;
  height: 28px;
  width: 40px; /* collapsed width */
  transition: width 0.3s ease;
  z-index: 1200;
  padding-right: 4px; /* small padding so icon isn't cut off */
}

.search-form.open,
.search-form:hover {
  width: 200px; /* expands smoothly */
}

/* Input text */
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px 10px;
  font-size: 13px;
  opacity: 0;
  width: 0;
  transition: opacity 0.2s ease, width 0.3s ease;
}

/* Show input when expanded */
.search-form.open input,
.search-form:hover input {
  opacity: 1;
  width: 160px;
}

/* Search button (🔍 icon) */
#searchBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  padding: 6px 8px 6px 4px; /* moved slightly left for spacing */
  color: #333;
  flex-shrink: 0; /* keeps it visible even when collapsed */
}


button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}
/* ===== Responsive design for small screens ===== */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* smaller text */
  }

  h1, h2, h3 {
    font-size: 1.2em;
  }

  button {
    font-size: 13px;
    padding: 8px 14px;
    width: 100%;          /* make buttons fit screen width */
    box-sizing: border-box;
    margin: 6px 0;
  }

  .container, .section {
    padding: 10px;
  }

  nav, header {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .pulse-text {
    display: none;
  }
}

.heart {
  display: inline-block;
  animation: heartbeat 3s infinite;
}

@keyframes heartbeat {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: scale(1);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: scale(1.3);
  }
}


/* ===================== */
/* AUTO EXPAND POPUP     */
/* ===================== */

.popup-wrap.has-video{
  max-height:92vh !important;
}

.popup-scroll.has-video{
  max-height:92vh !important;
}

/* Make videos fit cleanly */
.popup-scroll video{
  width:100% !important;
  height:auto !important;
  max-height:55vh;
  border-radius:8px;
}

/* ===================== */
/* FULLSCREEN VIDEO      */
/* ===================== */

.video-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,0.9);
  z-index: 99999;
  display:flex;
  justify-content:center;
  align-items:center;
}

.video-fullscreen-overlay video{
  width:95vw !important;
  max-height:95vh !important;
  border-radius:12px;
}

/* ===================== */
/* SWIPE-TO-CLOSE POPUP  */
/* ===================== */

.popup-swipe-bar{
  width:50px;
  height:6px;
  background:#ccc;
  border-radius:3px;
  margin:8px auto 4px;
}

/* ===== Popup Header Styling ===== */

.popup-header {
  position: sticky;
  top: -12px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 6px 6px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
  font-weight: 600;
}

.popup-title {
  color: #2196F3;       /* blue title */
  font-weight: 700;
}

.popup-right-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.popup-counter-label {
  font-size: 12px;
  color: #4CAF50;        /* green label */
  font-weight: 600;
}

.popup-counter-number {
  color: #FF0000;        /* red number */
  font-weight: 700;
}


/* ================================
   POPUP HEIGHT — RESPONSIVE
   ============================= */
/* ===========================================
   POPUP LAYOUT — CLEAN & BALANCED DESIGN
   =========================================== */

/* Desktop & tablet */
.popup-wrap {
  width: 380px;
  max-height: 70vh;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.popup-scroll {
  padding-top: 0 !important;
}

.popup-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

.popup-title {
  color: #2196F3;
  font-size: 13px;
  font-weight: 700;
}

.popup-right-box {
  display: flex;
  align-items: center;
  gap: 4px;
}

.popup-counter-label {
  font-size: 11px;
  color: #4CAF50;
  font-weight: 600;
}

.popup-counter-number {
  color: #FF0000;
  font-weight: 700;
  font-size: 11px;
}

/* Replies */
.reply {
  background: #f7f9fb;
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  word-wrap: break-word;
}

/* Media elements inside popup */
.popup-scroll video,
.popup-scroll img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* ===========================================
   MOBILE RESPONSIVE
   =========================================== */
@media (max-width: 768px) {

  .popup-wrap {
    width: 94% !important;       /* ← adds breathing room */
    max-width: 94% !important; /* ← allows real wider popup */
    margin: 0 auto !important;   /* ← centers it */
    max-height: 60vh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.2);
  }

  .popup-scroll {
    max-height: 60vh;
    padding-bottom: 70px;
  }

  .popup-header {
    padding: 8px 10px;
  }

  .popup-title {
    font-size: 14px;
  }
}


/*=======================
  Back ground - behine the map
 ========================*/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #aad3df; /* ⭐ your chosen color */
}

#map {
  height: 100vh;
  width: 100vw;
  background: #aad3df; /* backup color behind map */
}


#camPreview {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 200px !important;
  height: auto !important;
  z-index: 999999 !important;
  background: black;
  display: none; /* will be made visible by JS */
}


/* Smaller submenu buttons */
.submenu-btn {
  font-size: 12px;
  padding: 4px 8px;
  height: 32px;
  border-radius: 6px;
  background: #333;
  color: #fff;
  border: 1px solid #555;
  cursor: pointer;
}

.submenu-btn:hover {
  background: #555;
}


/* Container for share + home (top-right corner) */
.popup-share-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;  /* stack vertical */
  align-items: center;
  gap: 6px;
}

/* Share button */
.popup-share-btn {
  position: absolute;
  top: 50px;
  right: -10px;
  background: #ff000000;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 9999;
}

/* Default: BLUE icon */
.popup-share-btn img {
  width: 18px;
  height: 18px;
  filter: invert(35%) sepia(94%) saturate(2341%) hue-rotate(194deg)
          brightness(93%) contrast(95%);
}

/* Hover: GREEN icon */
.popup-share-btn:hover img {
  filter: invert(51%) sepia(96%) saturate(651%) hue-rotate(89deg)
          brightness(97%) contrast(99%);
}

/* Tooltip */
.popup-share-btn::after {
  content: "Share";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  white-space: nowrap;
}

.popup-share-btn:hover {
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.7);
  transform: scale(1.08);
}



.popup-home-btn {
  position: absolute;
  top: 20px;          /* exactly under the share button */
  right: -10px;
  background: #0000;  /* fully transparent */
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;

  /* same shadow + look as share button */
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);

  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 9999;
}

.popup-home-btn img {
  width: 26px;     /* bigger icon */
  height: 26px;    /* bigger icon */
  filter: brightness(1); /* keeps clean white look if needed */
}
.popup-home-btn:hover {
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.7);
  transform: scale(1.08);
}


/* 🔧 EXTRA: keep reply bar sane on very small screens */
@media (max-width: 600px){
  .reply-bar{
    gap:4px;
    padding:6px;
  }
  .reply-input{
    height:32px;
    font-size:13px;
    padding:6px 34px 6px 8px;
  }
  .inline-send-icon{
    right:6px;
    width:40px;
    height:40px;
  }
  .reply-bar .btn,
  .reply-bar button{
    width:auto;
    margin:0;
    padding:4px 6px;
    font-size:16px;
    height:32px;
    flex-shrink:0;
  }
}


/* Toast base ----------  Alert on main site------------------------*/
.pn-toast {
  position: fixed;
  top: 20px;                    /* moved from bottom to top */
  left: 50%;                    /* center horizontally */
  transform: translateX(-50%);  /* perfect center */
  
  padding: 14px 18px;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.25);
  z-index: 999999999;
  backdrop-filter: blur(8px);
  opacity: 0;

  /* NEW animation (slide from top downward) */
  animation: pn-slide-in 0.45s cubic-bezier(0.25, 1.3, 0.5, 1) forwards;

  margin-top: 10px; /* spacing for stacking */
}

/* Humanitarian emoji avatar circle */
.pn-toast-avatar {
  width: 40px;
  height: 40px;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  backdrop-filter: blur(3px);
}

/* Colors */
.pn-info {
  background: rgba(33,150,243,0.95);
}

.pn-success {
  background: rgba(76,175,80,0.95);
}

.pn-error {
  background: rgba(244,67,54,0.95);
}

.pn-toast-msg {
  line-height: 1.35;
  font-weight: 500;
  flex: 1;
}

/* Close button */
.pn-toast-close {
  cursor: pointer;
  font-size: 18px;
  opacity: 0.8;
}
.pn-toast-close:hover {
  opacity: 1;
}

/* ---- UPDATED ANIMATIONS FOR TOP CENTER ---- */

@keyframes pn-slide-in {
  0%   { opacity: 0; transform: translate(-50%, -40px); }
  60%  { opacity: 1; transform: translate(-50%, 4px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

.pn-toast.hide {
  animation: pn-slide-out 0.35s ease forwards;
}

@keyframes pn-slide-out {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}