/* Virii8 Site Contact Mobile GUI — app-sheet layer only.
 * Desktop/original styling stays in site-contact.css.
 */
.v8e-site-contact-wrap.v8e-contact-mobile-active {
  --v8e-contact-mobile-pad: 1rem;
  --v8e-contact-mobile-gap: .82rem;
  --v8e-contact-mobile-radius: 24px;
  margin: 0 auto;
  padding: max(.55rem, env(safe-area-inset-top)) max(.55rem, env(safe-area-inset-right)) max(.7rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left));
}

.v8e-contact-mobile-active.v8e-contact-mobile-density-compact {
  --v8e-contact-mobile-pad: .78rem;
  --v8e-contact-mobile-gap: .62rem;
  --v8e-contact-mobile-radius: 18px;
}
.v8e-contact-mobile-active.v8e-contact-mobile-density-spacious {
  --v8e-contact-mobile-pad: 1.18rem;
  --v8e-contact-mobile-gap: 1rem;
  --v8e-contact-mobile-radius: 28px;
}

.v8e-contact-mobile-active .v8e-contact-card {
  min-height: auto;
  padding: var(--v8e-contact-mobile-pad);
  border-radius: var(--v8e-contact-mobile-radius);
  border-color: color-mix(in srgb, var(--v8e-contact-accent, #00ff41) 28%, rgba(148,163,184,.36));
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  overflow: visible;
  contain: layout style;
}

.v8e-contact-mobile-active.v8e-contact-mobile-layout-app_sheet .v8e-contact-card {
  border-radius: 28px 28px 20px 20px;
}
.v8e-contact-mobile-active.v8e-contact-mobile-layout-browser_panel .v8e-contact-card {
  border-radius: 14px;
  border-top: 4px solid var(--v8e-contact-accent, #00ff41);
}
.v8e-contact-mobile-active.v8e-contact-mobile-layout-compact_card .v8e-contact-card {
  border-radius: 18px;
}

.v8e-contact-mobile-active.v8e-contact-mobile-theme-dark,
.v8e-contact-mobile-active.v8e-contact-mobile-theme-neomatrix {
  --v8e-contact-bg: #070b10;
  --v8e-contact-text: #f8fafc;
  --v8e-contact-muted: #b7c2d0;
  --v8e-contact-border: rgba(148, 163, 184, .28);
  --v8e-contact-field-bg: rgba(15, 23, 42, .92);
  --v8e-contact-field-text: #f8fafc;
}
.v8e-contact-mobile-active.v8e-contact-mobile-theme-light {
  --v8e-contact-bg: #ffffff;
  --v8e-contact-text: #111827;
  --v8e-contact-muted: #64748b;
  --v8e-contact-field-bg: #ffffff;
}
.v8e-contact-mobile-active.v8e-contact-mobile-theme-neomatrix {
  --v8e-contact-accent: #00ff41;
  --v8e-contact-bg: #020403;
  --v8e-contact-text: #e8ffee;
  --v8e-contact-muted: #9dffb4;
  --v8e-contact-border: rgba(0,255,65,.34);
  --v8e-contact-field-bg: rgba(0, 20, 9, .9);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.v8e-contact-mobile-active .v8e-contact-mobile-chrome {
  display: block;
  margin: -.2rem 0 var(--v8e-contact-mobile-gap);
}
.v8e-contact-mobile-active .v8e-contact-mobile-grabber {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v8e-contact-muted, #64748b) 38%, transparent);
  margin: .1rem auto .85rem;
}
.v8e-contact-mobile-active .v8e-contact-mobile-topline {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.v8e-contact-mobile-active .v8e-contact-mobile-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--v8e-contact-accent, #00ff41) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--v8e-contact-accent, #00ff41) 42%, transparent);
  box-shadow: none;
  flex: 0 0 auto;
}
.v8e-contact-mobile-active .v8e-contact-mobile-title {
  margin: 0;
  font-size: clamp(1.25rem, 7vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: inherit;
}
.v8e-contact-mobile-active .v8e-contact-mobile-intro {
  margin: .28rem 0 0;
  color: var(--v8e-contact-muted);
  font-size: .94rem;
  line-height: 1.38;
}
.v8e-contact-mobile-active.v8e-contact-mobile-compact-header .v8e-contact-head {
  display: none;
}

.v8e-contact-mobile-active .v8e-site-contact-form {
  display: grid;
  gap: var(--v8e-contact-mobile-gap);
  padding-bottom: .2rem;
}
.v8e-contact-mobile-active.v8e-contact-mobile-sticky-submit .v8e-site-contact-form {
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
.v8e-contact-mobile-active .v8e-contact-section {
  display: block;
  padding: .82rem;
  border: 1px solid color-mix(in srgb, var(--v8e-contact-border, rgba(148,163,184,.42)) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--v8e-contact-bg, #fff) 88%, rgba(148,163,184,.08));
}
.v8e-contact-mobile-active .v8e-contact-mobile-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 .62rem;
  color: var(--v8e-contact-muted);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.v8e-contact-mobile-active .v8e-contact-field {
  margin-bottom: var(--v8e-contact-mobile-gap);
}
.v8e-contact-mobile-active .v8e-contact-field:last-child,
.v8e-contact-mobile-active .v8e-contact-section .v8e-contact-field:last-child {
  margin-bottom: 0;
}
.v8e-contact-mobile-active .v8e-contact-grid,
.v8e-contact-mobile-active .v8e-contact-grid-2 {
  grid-template-columns: 1fr;
  gap: var(--v8e-contact-mobile-gap);
}
.v8e-contact-mobile-active .v8e-contact-field span {
  margin-bottom: .34rem;
  font-size: .92rem;
}
.v8e-contact-mobile-active .v8e-contact-field input[type="text"],
.v8e-contact-mobile-active .v8e-contact-field input[type="email"],
.v8e-contact-mobile-active .v8e-contact-field input[type="file"],
.v8e-contact-mobile-active .v8e-contact-field textarea {
  min-height: 48px;
  border-radius: 15px;
  padding: .88rem .92rem;
  font-size: 16px;
}
.v8e-contact-mobile-active .v8e-contact-field textarea {
  min-height: 132px;
  max-height: min(42vh, 320px);
}

.v8e-contact-mobile-active.v8e-contact-mobile-compact-uploads .v8e-contact-section-upload {
  padding: .72rem;
  border-style: dashed;
}
.v8e-contact-mobile-active.v8e-contact-mobile-compact-uploads .v8e-contact-upload > label > span:first-child {
  display: none;
}
.v8e-contact-mobile-active .v8e-contact-upload input[type="file"] {
  background: color-mix(in srgb, var(--v8e-contact-accent, #00ff41) 8%, var(--v8e-contact-field-bg, #fff));
  border-style: dashed;
}
.v8e-contact-mobile-active .v8e-contact-upload em,
.v8e-contact-mobile-active .v8e-contact-upload-summary {
  display: block;
  margin-top: .45rem;
  font-size: .8rem;
  color: var(--v8e-contact-muted);
  line-height: 1.35;
}
.v8e-contact-mobile-active .v8e-contact-upload-summary:not(:empty) {
  color: var(--v8e-contact-text);
  font-weight: 800;
}

.v8e-contact-mobile-active .v8e-contact-status:not(:empty) {
  margin-bottom: var(--v8e-contact-mobile-gap);
}
.v8e-contact-mobile-active .v8e-contact-alert {
  border-radius: 16px;
  padding: .78rem .86rem;
  font-size: .92rem;
}

.v8e-contact-mobile-active .v8e-contact-actions {
  margin: 0;
  display: block;
}
.v8e-contact-mobile-active.v8e-contact-mobile-sticky-submit .v8e-contact-actions {
  position: sticky;
  bottom: max(.55rem, env(safe-area-inset-bottom));
  z-index: 5;
  padding: .5rem;
  margin: 0 calc(var(--v8e-contact-mobile-pad) * -.25);
  border: 1px solid color-mix(in srgb, var(--v8e-contact-border, rgba(148,163,184,.42)) 68%, transparent);
  border-radius: 18px;
  background: var(--v8e-contact-bg, #fff);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
}
.v8e-contact-mobile-active .v8e-contact-submit {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  font-size: 1rem;
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
  .v8e-contact-mobile-active .v8e-contact-submit,
  .v8e-contact-mobile-active .v8e-contact-field input,
  .v8e-contact-mobile-active .v8e-contact-field textarea {
    transition: none !important;
  }
}


/* v1.6.601 mobile performance guard: keep scroll paint cheap on long public forms. */
@media (max-width: 720px) {
  .v8e-contact-mobile-active .v8e-contact-card,
  .v8e-contact-mobile-active .v8e-contact-section,
  .v8e-contact-mobile-active .v8e-contact-actions,
  .v8e-contact-mobile-active .v8e-contact-submit {
    will-change: auto;
  }
  .v8e-contact-mobile-active .v8e-contact-field input[type="text"],
  .v8e-contact-mobile-active .v8e-contact-field input[type="email"],
  .v8e-contact-mobile-active .v8e-contact-field input[type="file"],
  .v8e-contact-mobile-active .v8e-contact-field textarea {
    transition: border-color .12s ease, background-color .12s ease;
  }
}

/* v1.6.602 mobile input-latency guard: typing must win over decoration. */
@media (max-width: 720px) {
  .v8e-contact-mobile-active .v8e-contact-field input[type="text"],
  .v8e-contact-mobile-active .v8e-contact-field input[type="email"],
  .v8e-contact-mobile-active .v8e-contact-field input[type="file"],
  .v8e-contact-mobile-active .v8e-contact-field textarea,
  .v8e-contact-mobile-active .v8e-contact-submit {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
  .v8e-contact-mobile-active .v8e-contact-field input[type="text"]:focus,
  .v8e-contact-mobile-active .v8e-contact-field input[type="email"]:focus,
  .v8e-contact-mobile-active .v8e-contact-field textarea:focus {
    box-shadow: none !important;
    outline: 2px solid color-mix(in srgb, var(--v8e-contact-accent, #00ff41) 42%, transparent);
    outline-offset: 1px;
  }
  .v8e-contact-mobile-active.v8e-contact-theme-glass .v8e-contact-card,
  .v8e-contact-mobile-active.v8e-contact-theme-auto_os.v8e-contact-os-macos .v8e-contact-card,
  .v8e-contact-mobile-active.v8e-contact-theme-auto_os.v8e-contact-os-mobile .v8e-contact-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .v8e-contact-mobile-active.v8e-contact-mobile-sticky-submit .v8e-site-contact-form:focus-within {
    padding-bottom: .2rem;
  }
  .v8e-contact-mobile-active.v8e-contact-mobile-sticky-submit .v8e-site-contact-form:focus-within .v8e-contact-actions {
    position: static;
    box-shadow: none !important;
  }
}