/* ============================================================
   VIZSURGE SHARED HEADER + PROFILE — COMPATIBILITY LAYER
   Targets only the classes emitted by vs-header.js.
   ============================================================ */

#vs-header-mount{position:relative;z-index:9000;}

.vs-topbar{
  width:100%;
  /* Extracted into a variable so both min-height and padding stay in
     sync -- confirmed real bug: min-height was left at a fixed 64px
     while padding-top grew to 40-44px to clear the status bar. If
     box-sizing:border-box applies anywhere globally (common, and likely
     true in style.css, which isn't available to check directly),
     padding counts against that 64px total, leaving almost no room for
     the actual icon row and forcing an overflow that visually collided
     with the border-bottom line right at icon height -- exactly the
     "line through the logo/buttons" reported on a real device. Using a
     variable here means min-height grows by the same real amount as
     the padding regardless of which box-sizing mode is actually active,
     rather than needing yet another guessed pixel value. */
  --vs-topbar-pad-top:max(40px, calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top))));
  min-height:calc(56px + var(--vs-topbar-pad-top));
  /* Top padding accounts for the device status bar / notch when running
     inside the native app -- as of Capacitor 8.3.2+ (confirmed: this
     project is on 8.5.2), the framework injects real inset values as
     --safe-area-inset-* CSS variables automatically, no plugin needed.
     The env(safe-area-inset-top) fallback covers browsers/older WebView
     builds that only support the standard CSS env() function. On a
     regular desktop/mobile browser both resolve to 0, so this is safe
     to apply unconditionally -- it only adds real space where the OS
     actually reports a system-bar inset. */
  /* Top padding accounts for the device status bar / notch when running
     inside the native app. Uses max() rather than relying purely on the
     inset value: Capacitor 8.3.2+ injects real --safe-area-inset-* CSS
     variables automatically, but there's a documented bug where Android
     WebView versions below v140 can silently report 0 for
     env(safe-area-inset-top) even when a real inset exists -- which is
     the most likely reason the first version of this fix (pure
     calc(8px + inset)) wasn't enough on your device. Raised the floor
     from 24px to 40px after confirming (via real on-device inset
     logging elsewhere in this app) that this device's actual system-bar
     insets run well above 24px -- the old floor was only ever a safe
     minimum for the case where the inset genuinely is small, not a
     reliable fallback for when the real value can't be read at all. On
     a regular desktop/mobile browser the inset resolves to 0 and the
     40px floor alone applies -- still a normal, unremarkable amount of
     top padding. */
  padding:var(--vs-topbar-pad-top) 14px 8px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  position:relative;
  z-index:9001;
  background:linear-gradient(180deg,rgba(7,10,27,.96),rgba(8,11,28,.82));
  border-bottom:1px solid rgba(130,150,255,.13);
  box-shadow:0 8px 28px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
}
.vs-top-left,.vs-top-right{display:flex !important;align-items:center !important;}
.vs-top-right{gap:9px;margin-left:auto;}
.vs-top-left{min-width:0;}
.logo-link{
  display:flex !important;
  align-items:center !important;
  gap:10px;
  color:inherit !important;
  text-decoration:none !important;
}
.vs-logo-orb{
  width:43px;height:43px;display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(59,130,246,.22),rgba(99,102,241,.18),rgba(139,92,246,.20));
  border:1px solid rgba(129,140,248,.24);
  box-shadow:0 7px 20px rgba(37,99,235,.15),inset 0 1px rgba(255,255,255,.10);
}
.app-logo{width:38px;height:38px;object-fit:contain;display:block;}
.app-name{
  color:#f7f9ff !important;
  font-size:19px;
  font-weight:850;
  letter-spacing:-.035em;
}
.vs-hdr-divider{
  width:1px;height:28px;
  background:rgba(148,163,184,.16);
  margin:0 3px;
}
.vs-hdr-btn{
  appearance:none;
  border:1px solid rgba(129,140,248,.20);
  min-height:40px;
  border-radius:13px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px;
  padding:0 11px;
  color:#dce5ff !important;
  background:linear-gradient(145deg,rgba(28,38,76,.78),rgba(11,16,38,.90));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 5px 16px rgba(0,0,0,.18);
  cursor:pointer;
  font:inherit;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.vs-hdr-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(129,140,248,.48);
  background:linear-gradient(145deg,rgba(37,54,105,.84),rgba(16,22,49,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 9px 22px rgba(0,0,0,.25);
}
.vs-hdr-btn:active{transform:scale(.97);}
.vs-hdr-btn--invite{
  background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(99,102,241,.24));
  border-color:rgba(96,165,250,.30);
}
.vs-hdr-icon{display:inline-grid;place-items:center;}
.vs-hdr-label{font-size:12px;font-weight:750;letter-spacing:.01em;}
.vs-avatar-wrap{position:relative;width:31px;height:31px;display:grid;place-items:center;}
.vs-avatar-small,.vs-avatar-fallback{
  width:31px;height:31px;border-radius:50%;object-fit:cover;
}
.vs-avatar-fallback{
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:12px;
  background:linear-gradient(135deg,#2563eb,#6366f1,#8b5cf6);
  border:1px solid rgba(165,180,252,.42);
}
.vs-avatar-small{display:block;border:1px solid rgba(165,180,252,.38);}
.vs-profile-chevron{font-size:15px;color:#98a6ca;line-height:1;}

/* Profile overlay */
.profile-overlay{
  position:fixed !important;
  inset:0 !important;
  display:none;
  align-items:flex-end !important;
  justify-content:center !important;
  z-index:100000 !important;
  padding:0;
  background:rgba(2,4,14,.66);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}
.profile-overlay.active{display:flex !important;}
.profile-sheet{
  position:relative;
  width:min(100%,560px);
  max-height:min(88dvh,760px);
  overflow:auto;
  padding:28px 22px calc(24px + env(safe-area-inset-bottom));
  border-radius:28px 28px 0 0;
  color:#f4f7ff;
  background:
    radial-gradient(500px 260px at 12% 0%,rgba(59,130,246,.17),transparent 68%),
    radial-gradient(500px 280px at 95% 10%,rgba(139,92,246,.15),transparent 70%),
    linear-gradient(155deg,rgba(17,24,56,.98),rgba(7,11,29,.99));
  border:1px solid rgba(129,140,248,.20);
  box-shadow:0 -28px 80px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.07);
  animation:vsProfileUp .26s cubic-bezier(.22,.8,.24,1);
}
@keyframes vsProfileUp{from{transform:translateY(100%);opacity:.7}to{transform:translateY(0);opacity:1}}
.profile-sheet-glow{
  position:absolute;left:12%;right:12%;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,#38bdf8,#6366f1,#a78bfa,transparent);
  filter:blur(.2px);opacity:.85;
}
.profile-sheet-handle{
  width:44px;height:4px;border-radius:999px;
  margin:-12px auto 18px;
  background:linear-gradient(90deg,#38bdf8,#6366f1,#a78bfa);
}
.profile-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(148,163,184,.16);
  color:#c4cde6;background:rgba(255,255,255,.045);
  cursor:pointer;font-size:24px;line-height:1;
  display:grid;place-items:center;
}
.profile-close:hover{background:rgba(255,255,255,.09);color:#fff;}

.profile-header{margin:4px 0 22px !important;}
.profile-identity{display:flex;align-items:center;gap:15px;}
.profile-avatar-large-wrap{
  position:relative;flex:0 0 70px;width:70px;height:70px;
  display:grid;place-items:center;border-radius:22px;
  background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(139,92,246,.25));
  border:1px solid rgba(129,140,248,.25);
  box-shadow:0 12px 30px rgba(37,99,235,.16),inset 0 1px rgba(255,255,255,.10);
}
.profile-pic-large,.profile-avatar-fallback{
  width:62px;height:62px;border-radius:18px;object-fit:cover;
}
.profile-avatar-fallback{
  display:grid;place-items:center;
  font-weight:900;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#2563eb,#6366f1,#8b5cf6);
}
.profile-online-dot{
  position:absolute;right:2px;bottom:2px;width:12px;height:12px;
  border-radius:50%;background:#34d399;border:2px solid #111831;
  box-shadow:0 0 12px rgba(52,211,153,.7);
}
.profile-identity-copy{min-width:0;}
.profile-kicker,.profile-section-title{
  color:#7dd3fc;font-size:10px;font-weight:850;letter-spacing:.14em;
}
.profile-name{
  margin-top:3px;color:#fff;font-size:22px;font-weight:850;
  letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-subtitle{margin-top:3px;color:#9ba8c9;font-size:12px;}

.profile-signed-out{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;
  align-items:center;
  padding:15px;
  margin-bottom:19px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(139,92,246,.10));
  border:1px solid rgba(129,140,248,.15);
}
.profile-signed-out-icon{grid-row:span 2;font-size:25px;}
.profile-signed-out-title{font-weight:800;color:#fff;font-size:14px;}
.profile-signed-out-copy{color:#9da9c7;font-size:11px;line-height:1.45;}
.gsi-overlay-container{grid-column:2;margin-top:6px;display:flex;justify-content:flex-start;}

.profile-section-title{margin:0 4px 8px;color:#7785a9;}
.profile-section{display:grid;gap:7px;}
.profile-item{
  width:100%;min-height:58px;
  display:flex !important;align-items:center !important;
  gap:12px;padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.10);
  background:rgba(255,255,255,.035);
  color:#e8edff;
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.profile-item:hover{
  transform:translateX(2px);
  background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(99,102,241,.10));
  border-color:rgba(129,140,248,.25);
}
.profile-item-icon{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;border-radius:12px;
  color:#9bdcff;font-size:18px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(99,102,241,.18));
  border:1px solid rgba(129,140,248,.13);
}
.profile-item-copy{display:flex;flex-direction:column;min-width:0;flex:1;}
.profile-item-copy strong{font-size:13px;color:#f2f5ff;font-weight:750;}
.profile-item-copy small{font-size:10px;color:#7f8cad;margin-top:2px;}
.profile-item-arrow{font-size:23px;color:#7180a5;}
.profile-divider{height:1px;background:rgba(148,163,184,.10);margin:16px 0 10px;}
.profile-item.signout{
  color:#ffc4d0;
  background:linear-gradient(135deg,rgba(190,24,93,.10),rgba(127,29,29,.10));
  border-color:rgba(244,63,94,.18);
}
.profile-item.signout .profile-item-icon{color:#fda4af;background:rgba(244,63,94,.10);}
.profile-footer-note{text-align:center;color:#667394;font-size:10px;margin-top:16px;}

/* Avoid the shared header CSS being affected by page button rules. */
#vs-header-mount button{font-family:inherit;}

@media(max-width:600px){
  /* This is the rule that was actually winning on every phone-width
     screen (confirmed via live devtools: computed padding-top was 6px,
     not the 24px or 40px set higher up in this file) -- a flat padding
     shorthand here silently overrides the safe-area-aware rule above it
     for any screen under 600px wide, which is effectively all phones.
     Neither earlier attempt at raising the floor above ever had a
     chance to apply because of this. Top value now uses the same
     safe-area calc as the non-mobile rule; bottom/left/right keep this
     breakpoint's original compact spacing. */
  .vs-topbar{min-height:calc(44px + var(--vs-topbar-pad-top));padding:var(--vs-topbar-pad-top) 9px 6px;}
  .vs-logo-orb{width:39px;height:39px;border-radius:12px;}
  .app-logo{width:35px;height:35px;}
  .app-name{font-size:17px;}
  .vs-hdr-btn{min-height:38px;padding:0 9px;border-radius:12px;}
  .vs-hdr-label{display:none;}
  .vs-hdr-divider{display:none;}
  .profile-sheet{width:100%;max-height:91dvh;padding:24px 15px calc(20px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0;}
}
@media(prefers-reduced-motion:reduce){
  .profile-sheet{animation:none;}
  .vs-hdr-btn,.profile-item{transition:none;}
}


/* ============================================================
   HEADER ACTIONS — FINAL ALIGNMENT FIX
   Keep Invite and Profile as independent, non-overlapping controls.
   ============================================================ */

.vs-top-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex:0 0 auto !important;
  min-width:0 !important;
}

.vs-hdr-divider{
  width:1px !important;
  height:26px !important;
  flex:0 0 1px !important;
  margin:0 2px 0 0 !important;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(148,163,184,.20),
    transparent
  ) !important;
}

/* Invite is a real text button — give it enough width so the label
   can never spill into the profile control. */
#vs-header-mount #inviteBtn{
  width:auto !important;
  min-width:82px !important;
  height:40px !important;
  min-height:40px !important;
  flex:0 0 auto !important;
  padding:0 13px !important;
  gap:7px !important;
  border-radius:13px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#vs-header-mount #inviteBtn .vs-hdr-icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  display:grid !important;
  place-items:center !important;
}

#vs-header-mount #inviteBtn .vs-hdr-icon svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

#vs-header-mount #inviteBtn .vs-hdr-label{
  display:inline-block !important;
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:12px !important;
}

/* Profile is a compact square control and never inherits the Invite
   button's sizing. */
#vs-header-mount #profileBtn{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  flex:0 0 44px !important;
  gap:0 !important;
  border-radius:13px !important;
  box-sizing:border-box !important;
}

#vs-header-mount #profileBtn .vs-avatar-wrap{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}

#vs-header-mount #profileBtn .vs-avatar-small,
#vs-header-mount #profileBtn .vs-avatar-fallback{
  width:30px !important;
  height:30px !important;
}

#vs-header-mount #profileBtn .vs-profile-chevron{
  display:none !important;
}

/* Signed-in/out state should tint the whole profile control without
   changing its dimensions. */
#vs-header-mount #profileBtn.signed-in,
#vs-header-mount #profileBtn.signed-out{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  padding:0 !important;
}

/* Mobile: keep both controls visible and compact. */
@media(max-width:600px){
  .vs-top-right{
    gap:7px !important;
  }

  #vs-header-mount #inviteBtn{
    min-width:40px !important;
    width:40px !important;
    max-width:40px !important;
    padding:0 !important;
    gap:0 !important;
  }

  #vs-header-mount #inviteBtn .vs-hdr-label{
    display:none !important;
  }

  #vs-header-mount #profileBtn{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    flex-basis:40px !important;
    height:40px !important;
  }

  #vs-header-mount #profileBtn .vs-avatar-wrap,
  #vs-header-mount #profileBtn .vs-avatar-small,
  #vs-header-mount #profileBtn .vs-avatar-fallback{
    width:28px !important;
    height:28px !important;
  }

  .vs-hdr-divider{
    display:none !important;
  }
}


/* ============================================================
   SIGNED-IN PROFILE AVATAR — PHOTO ONLY
   ============================================================ */

#vs-header-mount #profileBtn.signed-in{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  overflow:hidden !important;
}

#vs-header-mount #profileBtn.signed-in .vs-avatar-wrap{
  position:relative !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  flex:0 0 30px !important;
  display:block !important;
}

#vs-header-mount #profileBtn.signed-in .vs-avatar-fallback{
  display:none !important;
}

#vs-header-mount #profileBtn.signed-in .vs-avatar-small{
  display:block !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  margin:0 !important;
  object-fit:cover !important;
  border-radius:50% !important;
  border:1.5px solid rgba(129,140,248,.75) !important;
  box-shadow:0 0 0 2px rgba(99,102,241,.12),0 4px 14px rgba(0,0,0,.35) !important;
}

#vs-header-mount #profileBtn.signed-in .vs-profile-chevron{
  display:none !important;
}

/* Large profile sheet avatar: never show the old V fallback when signed in. */
#profileOverlay .profile-avatar-large-wrap .profile-avatar-fallback{
  display:none !important;
}

#profileOverlay .profile-avatar-large-wrap{
  position:relative !important;
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  flex:0 0 64px !important;
}

#profileOverlay .profile-avatar-large-wrap .profile-pic-large{
  display:block !important;
  width:64px !important;
  height:64px !important;
  object-fit:cover !important;
  border-radius:20px !important;
  border:2px solid rgba(129,140,248,.78) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10),0 12px 30px rgba(0,0,0,.38) !important;
}

#profileOverlay .profile-online-dot{
  z-index:3 !important;
}

/* If Google/account photo is temporarily unavailable, don't replace it
   with a letter. The image simply remains absent until it is available. */
#profileOverlay .profile-avatar-large-wrap .profile-pic-large[src=""],
#vs-header-mount #profileBtn.signed-in .vs-avatar-small[src=""]{
  display:none !important;
}

@media(max-width:600px){
  #vs-header-mount #profileBtn.signed-in{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    flex-basis:40px !important;
  }

  #vs-header-mount #profileBtn.signed-in .vs-avatar-wrap,
  #vs-header-mount #profileBtn.signed-in .vs-avatar-small{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
  }
}

/* =========================================================
   COVIYO BRAND WORDMARK — AUTHORITATIVE
   ========================================================= */
#vs-header-mount .app-name,
.vs-topbar .app-name{
  display:inline-block !important;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
  line-height:1 !important;
  color:transparent !important;
  background:linear-gradient(90deg,#38d9ff 0%,#3b82f6 24%,#8b5cf6 48%,#d946ef 70%,#ff4f9a 84%,#ff9f43 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  text-shadow:0 0 18px rgba(139,92,246,.18) !important;
}