:root{
  --bg:#0b1020;
  --card:rgba(255,255,255,0.06);
  --accent:#ff758f;
  --muted:rgba(255,255,255,0.75);
  --bubble-me:#ff758f;
  --bubble-them:#2b2f45
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:radial-gradient(ellipse at 10% 10%, rgba(255,117,143,0.08), transparent 10%), radial-gradient(ellipse at 90% 90%, rgba(86,163,255,0.05), transparent 20%), var(--bg);color:var(--muted);overflow:hidden}

/* ---------- RICH & LIVELY BACKGROUND ANIMATIONS ---------- */
.float-wrap { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; contain:layout style paint; }
.float { position:absolute; border-radius:50%; opacity:0.22; filter: blur(30px); mix-blend-mode:screen; transform-origin:center; will-change:transform; animation: float-drift 20s linear infinite; backface-visibility:hidden; }
.float.h1 { width:520px; height:520px; left:-12%; top:8%; background: linear-gradient(135deg,#ff9fb3 0%, #ff758f 60%); }
.float.h2 { width:380px; height:380px; right:-10%; bottom:4%; background: linear-gradient(135deg,#6fb8ff 0%, #86d0ff 60%); animation-duration:28s; opacity:0.18; }
.float.s1 { width:160px; height:160px; left:18%; top:62%; background: linear-gradient(135deg,#ffd27a 0%, #ff9f5a 60%); opacity:0.12; animation-duration:16s; }
.float.s2 { width:110px; height:110px; right:20%; top:14%; background: linear-gradient(135deg,#9bffdd 0%, #5ad8c9 60%); opacity:0.12; animation-duration:14s; }

@keyframes float-drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(6vw,-12vh,0) rotate(30deg) scale(1.04); }
  50%  { transform: translate3d(0,-28vh,0) rotate(120deg) scale(1.06); }
  75%  { transform: translate3d(-6vw,-12vh,0) rotate(220deg) scale(1.02); }
  100% { transform: translate3d(0,0,0) rotate(360deg) scale(1); }
}

.hearts { position:fixed; inset:0; pointer-events:none; z-index:1; contain:layout style paint; }
.heart, .spark, .num { position:absolute; font-size:20px; opacity:0; transform: translateY(30vh) scale(.8); will-change: transform, opacity; animation: float-rise 6.8s linear infinite; text-shadow: 0 4px 16px rgba(0,0,0,0.45); backface-visibility:hidden; }
@keyframes float-rise {
  0%   { opacity:0; transform: translate3d(0,40vh,0) scale(.8) rotate(0); filter: blur(0); }
  10%  { opacity:0.95; transform: translate3d(var(--sx,0),20vh,0) scale(1) rotate(var(--rot,0)); }
  55%  { opacity:0.9; transform: translate3d(calc(var(--sx,0) * -1), -10vh,0) scale(1.02) rotate(calc(var(--rot,0) + 40deg)); }
  100% { opacity:0; transform: translate3d(0,-40vh,0) scale(1.08) rotate(calc(var(--rot,0) + 80deg)); filter: blur(2px); }
}
.heart{ font-size:22px; }
.spark{ font-size:16px; opacity:0.85; filter:drop-shadow(0 4px 8px rgba(255,255,255,0.08)); }
.num{ font-weight:900; font-size:36px; opacity:0.95; letter-spacing:1px; }

.heart.h1 { left:8%;  bottom:8%; animation-delay:0.2s; --sx:-6vw; --rot:6deg; }
.heart.h2 { left:22%; bottom:6%; animation-delay:1.4s; --sx:4vw; --rot:-8deg; animation-duration:7.2s; }
.heart.h3 { left:40%; bottom:10%; animation-delay:0.8s; --sx:-3vw; --rot:2deg; animation-duration:6.4s; }
.heart.h4 { left:62%; bottom:6%; animation-delay:1.9s; --sx:5vw; --rot:-12deg; animation-duration:7.6s; }
.heart.h5 { left:82%; bottom:12%; animation-delay:0.5s; --sx:-2vw; --rot:8deg; animation-duration:6.8s; }

.spark.s1 { left:14%; top:20%; animation-delay:0.6s; --sx:3vw; --rot:14deg; animation-duration:9s; }
.spark.s2 { left:76%; top:18%; animation-delay:0.3s; --sx:-3vw; --rot:-18deg; animation-duration:8.2s; }

.num.n1 { left:18%; bottom:4%; animation-delay:0.4s; animation-duration:7s; --sx:-3vw; --rot:6deg; }
.num.n2 { left:48%; bottom:6%; animation-delay:1.0s; animation-duration:7.6s; --sx:2vw; --rot:-10deg; }
.num.n3 { left:78%; bottom:5%; animation-delay:1.6s; animation-duration:6.6s; --sx:-2vw; --rot:4deg; }

.pop { animation: popPulse 700ms ease-out forwards; }
@keyframes popPulse {
  0% { transform: scale(1); opacity:1; filter:drop-shadow(0 12px 30px rgba(255,117,143,0.12)); }
  50% { transform: scale(1.25); filter:drop-shadow(0 20px 46px rgba(255,117,143,0.18)); }
  100% { transform: scale(1); filter:drop-shadow(0 6px 20px rgba(255,117,143,0.08)); }
}

/* ---------- CHAT UI ---------- */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;box-sizing:border-box;z-index:5}
.card{width:min(980px,96%);height:min(780px,94%);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter: blur(8px);border-radius:18px;padding:0;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(2,6,23,0.6);overflow:visible;position:relative}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.03)}
.title{font-weight:700;color:white;font-size:18px}
.controls{display:flex;gap:8px;align-items:center}
.chat{flex:1;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch;padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.messages{display:flex;flex-direction:column;gap:8px;overflow:visible}
.msg-row{max-width:78%;display:flex;flex-direction:column;position:relative;animation: msgFadeIn 0.3s ease-out forwards;contain:layout style paint;will-change:transform,opacity;overflow:visible !important}
@keyframes msgFadeIn {
  from { opacity:0; transform: translateY(8px) scale(0.98); }
  to { opacity:1; transform: translateY(0) scale(1); }
}
.me{align-self:flex-end}
.them{align-self:flex-start}
.bubble{padding:10px 14px;border-radius:14px;color:white;font-weight:600;line-height:1.15;box-shadow:0 6px 18px rgba(2,6,23,0.45);word-break:break-word;transition:transform 0.2s ease, box-shadow 0.2s ease;contain:layout style;transform:translateZ(0)}
.bubble.me{background:linear-gradient(90deg,var(--bubble-me),#ff9f77);border-bottom-right-radius:4px}
.bubble.them{background:rgba(255,255,255,0.03);color:var(--muted);border-bottom-left-radius:4px}
.meta{font-size:11px;opacity:0.85;margin-top:6px;color:rgba(255,255,255,0.8);display:flex;align-items:center;gap:6px}
.meta .edited-label{font-style:italic;opacity:0.7}
.composer{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,0.03);align-items:end;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02));transition:transform 0.3s ease}
.composer textarea{flex:1;min-height:56px;max-height:140px;background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:12px;color:var(--muted);resize:none;font-size:16px;font-family:inherit}
.composer textarea:focus{outline:none;border-color:rgba(255,117,143,0.3)}
.btn{background:linear-gradient(90deg,var(--accent),#ff9f77);border:none;padding:10px 14px;border-radius:12px;color:#0b1020;font-weight:700;cursor:pointer;transition:transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;font-size:14px}
.btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(255,117,143,0.3)}
.btn:active{transform:scale(0.98)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:12px;cursor:pointer;transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;font-size:14px}
.ghost:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);transform:scale(1.03)}
.ghost:active{transform:scale(0.98)}
.small{font-size:12px;opacity:0.8}
#pp-status{position:fixed;left:14px;bottom:14px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,0.45);color:#fff;font-size:12px;z-index:50}
.overlay{position:fixed;inset:0;background:linear-gradient(rgba(3,6,15,0.55),rgba(3,6,15,0.7));display:flex;align-items:center;justify-content:center;z-index:60;backdrop-filter: blur(6px);animation: fadeIn 170ms ease}
.modal{width:min(520px,94%);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:14px;padding:18px;box-shadow:0 12px 40px rgba(2,6,23,0.65);text-align:center;color:var(--muted);animation: modalSlideIn 200ms ease-out}
@keyframes modalSlideIn {
  from { opacity:0; transform: translateY(-10px) scale(0.98); }
  to { opacity:1; transform: translateY(0) scale(1); }
}

.modal-title{color:#fff;margin:0 0 6px 0;font-weight:700;font-size:18px}
.modal-text{margin:0 0 14px 0;color:var(--muted);font-size:13px;line-height:1.5}

/* Footer */
.footer{padding:12px 18px;border-top:1px solid rgba(255,255,255,0.03);text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}
.encryption-note{font-size:11px;opacity:0.7;margin:0 0 4px 0;color:var(--muted)}
.copyright{font-size:10px;opacity:0.6;margin:0;color:var(--muted)}

@media (max-width:720px){ 
  .card{height:95vh;width:98vw;border-radius:14px} 
  .header{padding:10px} 
  .chat{padding:12px} 
  .composer{padding:10px} 
  .footer{padding:10px}
}

/* Preserve whitespace and allow selection */
.bubble { user-select: text; position: relative; }
.msg-pre { white-space: pre-wrap; font-family: inherit; margin: 0; color: inherit; background: transparent; font-size: inherit; line-height: 1.25; }

/* Message editing */
.msg-edit-box {
  margin-top:8px;
  padding:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.msg-edit-input {
  flex:1;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:8px;
  color:var(--muted);
  font-size:14px;
  font-family:inherit;
  resize:none;
  min-height:40px;
  max-height:120px;
}
.msg-edit-input:focus {
  outline:none;
  border-color:rgba(255,117,143,0.4);
}
.msg-edit-actions {
  display:flex;
  gap:6px;
}
.msg-edit-btn {
  padding:6px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:transform 0.1s ease, opacity 0.1s ease;
}
.msg-edit-btn:hover {
  transform:scale(1.05);
}
.msg-edit-btn:active {
  transform:scale(0.95);
}
.msg-edit-save {
  background:linear-gradient(90deg,var(--accent),#ff9f77);
  color:#0b1020;
}
.msg-edit-cancel {
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  color:var(--muted);
}

/* Reactions */
.msg-reactions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.05);
}
.reaction-btn {
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  color:var(--muted);
}
.reaction-btn:hover {
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.15);
  transform:scale(1.05);
}
.reaction-btn:active {
  transform:scale(0.95);
}
.reaction-btn.active {
  background:rgba(255,117,143,0.15);
  border-color:rgba(255,117,143,0.3);
  color:#ff758f;
}
.reaction-emoji {
  font-size:14px;
}
.reaction-count {
  font-size:11px;
  font-weight:600;
  min-width:16px;
  text-align:center;
}
.reaction-picker {
  display:flex;
  gap:4px;
  padding:4px;
  background:rgba(255,255,255,0.05);
  border-radius:12px;
  margin-top:4px;
}
.reaction-picker-btn {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.reaction-picker-btn:hover {
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.15);
  transform:scale(1.1);
}
.reaction-picker-btn:active {
  transform:scale(0.9);
}

/* ---------- message menu & button (fixed) ---------- */
.msg-menu-button {
  position: absolute;
  right: -6px;
  top: 6px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--muted);
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease, transform .12s ease, background .12s ease;
  z-index: 100001;        /* ensure above bubbles */
  pointer-events: auto;
}

/* Desktop: only show menu button on hover */
.msg-row:hover .msg-menu-button,
.msg-row.show-menu .msg-menu-button { 
  opacity:1;
  transform: translateY(-2px);
}

/* Mobile: always visible (easier to tap) */
@media (max-width:520px) {
  .msg-menu-button { opacity:0.85 !important; right:8px; }
  .msg-row.them .msg-menu-button { right:auto; left:8px; }
}

/* Menu popup (positioned in JS, but styled here) */
.msg-options {
  position: fixed;
  min-width:150px;
  max-width: 320px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  background: rgba(18,18,24,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  pointer-events:auto;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 100000; /* very high to float above everything */
  overflow: auto;
  max-height: calc(100vh - 40px);
}

/* when menu is visible */
.msg-options.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* keep `hidden` only as state, don't use display:none !important anywhere */
.msg-options.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
}

.msg-option {
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
.msg-option:hover { background: rgba(255,255,255,0.04); color: white; transform: translateX(3px); }

/* Delete confirmation popup specifics */
#deletePopup { display:none; z-index:80; }
#deletePopup .modal { max-width:360px; padding:18px; }
#deletePopup .delete-title { color: #fff; margin: 0 0 6px 0; font-weight:700; font-size:18px; }
#deletePopup .delete-text { margin:0 0 14px 0; color:var(--muted); font-size:13px; }

/* encryption modal specifics */
#encryptionModal .modal-text pre { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; max-height:220px; overflow:auto; }
#encryptionModal dd { margin: 0 0 8px 0; color: var(--muted); font-size:13px; }
#encryptionModal dt { font-size:13px; color:#fff; margin-top:6px; }

/* All modals */
.overlay[aria-hidden="true"] { display:none; }
.overlay[aria-hidden="false"] { display:flex; }

@keyframes fadeIn { 
  from { opacity:0 } 
  to { opacity:1 } 
}

/* lock-scroll class to prevent background scroll while modal open */
.lock-scroll { overflow: hidden !important; height: 100vh; }

/* Mobile keyboard handling */
@media (max-width: 720px) {
  .composer {
    position: sticky;
    bottom: 0;
  }
  .card {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
  }
  .chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Smooth scroll behavior */
.chat {
  scroll-behavior: smooth;
}

/* Message send/receive animation */
.msg-row.just-sent {
  animation: msgPopIn 0.4s ease-out forwards;
}
@keyframes msgPopIn {
  0% { opacity:0; transform: translateY(12px) scale(0.95); }
  50% { transform: translateY(-2px) scale(1.02); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* Reaction animation */
.reaction-btn.just-added {
  animation: reactionPop 0.3s ease-out forwards;
}
@keyframes reactionPop {
  0% { transform: scale(0); opacity:0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity:1; }
}

/* Share modal styles */
#shareModal .modal { max-width:480px; padding:20px; }
.share-link-container {
  margin:14px 0;
  padding:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
}
.share-link-input {
  width:100%;
  padding:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:13px;
  font-family:monospace;
  word-break:break-all;
  outline:none;
  cursor:text;
  user-select:all;
}
.share-link-input:focus {
  outline:none;
}
.share-warning {
  font-size:11px;
  opacity:0.7;
  margin:8px 0 14px 0;
  color:var(--muted);
  text-align:center;
}
.share-buttons {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.share-btn {
  min-height:44px;
  width:100%;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.share-btn:before {
  content:'';
  display:inline-block;
  width:18px;
  height:18px;
}
#copyLinkBtn:before {
  content:'📋';
}
#shareWhatsAppBtn:before {
  content:'💬';
}

@media (max-width:520px) {
  #shareModal .modal {
    width:94%;
    padding:16px;
  }
  .share-buttons {
    gap:8px;
  }
  .share-btn {
    min-height:48px;
    font-size:15px;
  }
}

/* Typing indicator */
.typing-indicator {
  display:none;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}
.typing-indicator .dots span { animation: blink 1s infinite; padding: 0 2px; opacity:0.3; }
.typing-indicator .dots span:nth-child(2) { animation-delay: .15s; }
.typing-indicator .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%{opacity:0.3} 50%{opacity:1} 100%{opacity:0.3} }