/* Responsive and accessibility finishing layer.
   Deliberately preserves the supplied source palette, widths and component geometry. */
:root {
  --responsive-safe-top: env(safe-area-inset-top, 0px);
  --responsive-safe-right: env(safe-area-inset-right, 0px);
  --responsive-safe-bottom: env(safe-area-inset-bottom, 0px);
  --responsive-safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-height: 100%;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

#app,
#new-panels {
  min-height: 100%;
  min-width: 0;
}

.new-panel {
  /* Insets stretch in the actual viewport even under the source's body zoom.
     A fixed 100dvh height here shrinks the panel to 88% and leaves top/bottom gaps. */
  height: auto;
  max-height: none;
  min-height: 0;
  padding-top: var(--responsive-safe-top);
  padding-bottom: var(--responsive-safe-bottom);
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.new-panel-head,
.new-panel-body,
.new-panel :is(form, section, article, fieldset) {
  min-width: 0;
}

.new-panel-body {
  padding-bottom: max(24px, var(--responsive-safe-bottom));
  scroll-padding-block: 16px max(24px, var(--responsive-safe-bottom));
  overscroll-behavior: contain;
}

/* Keep sheet cards and their scroll regions inside short screens and the keyboard viewport. */
#new-panels :is(.fsv-card, .fs-gift-card, .vs-dialog) {
  max-height: min(92dvh, 100dvh - var(--responsive-safe-top) - var(--responsive-safe-bottom));
  min-height: 0;
}

#new-panels :is(.fsv-card, .fs-gift-card) > .new-panel-body,
#new-panels .vs-dialog .vs-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#new-panels .final-story-viewers {
  padding-bottom: var(--responsive-safe-bottom);
}

#new-panels .final-story-viewers .fsv-card {
  padding-bottom: var(--responsive-safe-bottom);
}

/* Prevent iOS focus zoom and ensure a focused field can scroll above the on-screen keyboard. */
.new-panel :is(input, textarea, select, [contenteditable="true"]),
.aseel-auth :is(input, textarea, select) {
  max-width: 100%;
  scroll-margin-block: 18px;
  font-size: max(18.3px, 1em);
}

.new-panel :is(img, video, canvas, svg) {
  max-width: 100%;
}

.new-panel :is(p, h1, h2, h3, label, small, b, strong, a) {
  overflow-wrap: anywhere;
}

#app :is(button, a, input, textarea, select, [tabindex]):focus-visible,
.aseel-auth :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid #7C3AED;
  outline-offset: 3px;
}

:where(button, a, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
  touch-action: manipulation;
}

.bnav {
  bottom: calc(25px + var(--responsive-safe-bottom)) !important;
}

.bnav > button {
  min-width: 50px;
  min-height: 50px;
}

@media (max-width: 360px) {
  .new-panel-head {
    gap: 9px;
    padding-inline: 12px;
  }

  .new-panel-body {
    padding-inline: 12px;
  }

  #new-panels .final-story-viewers .fsv-card {
    max-height: 82dvh;
  }
}

@media (max-height: 560px) {
  .new-panel-head {
    min-height: 52px;
    padding-block: 8px;
  }

  .new-panel-body {
    padding-top: 10px;
    scroll-padding-block: 10px 20px;
  }

  #new-panels :is(.fsv-card, .fs-gift-card, .vs-dialog) {
    max-height: calc(100dvh - var(--responsive-safe-top) - var(--responsive-safe-bottom));
    border-radius: 18px 18px 0 0;
  }

  #new-panels .final-gift .fs-gift-card {
    max-height: calc(100dvh - var(--responsive-safe-top) - var(--responsive-safe-bottom) - 8dvh);
  }

  #new-panels .final-story-viewers .fsv-card {
    max-height: 88dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    caret-color: auto;
  }
}

/* One branded vertical scroll surface per sheet; horizontal rails remain intentional. */
#new-panels :is(.new-panel-body, .nc-scroll, .nc-music-sheet, .s4-sheet-card, .vs-content, .videoShare-comments-sheet) {
  scrollbar-width: thin;
  scrollbar-color: #bda8e3 #f7f3fc;
  -webkit-overflow-scrolling: touch;
}

#new-panels :is(.new-panel-body, .nc-scroll, .nc-music-sheet, .s4-sheet-card, .vs-content, .videoShare-comments-sheet)::-webkit-scrollbar { width: 6px; height: 6px; }
#new-panels :is(.new-panel-body, .nc-scroll, .nc-music-sheet, .s4-sheet-card, .vs-content, .videoShare-comments-sheet)::-webkit-scrollbar-track { background: #f7f3fc; border-radius: 99px; }
#new-panels :is(.new-panel-body, .nc-scroll, .nc-music-sheet, .s4-sheet-card, .vs-content, .videoShare-comments-sheet)::-webkit-scrollbar-thumb { background: #bda8e3; border: 1px solid #f7f3fc; border-radius: 99px; }

/* Native form state is retained, while visible controls use the VVoice surface. */
#new-panels .new-panel select:not(.nc-native-community),
#app select:not(.nc-native-community) {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  border: 1px solid #e5dcf4;
  border-radius: 14px;
  padding-inline: 13px 38px;
  color: #211735;
  background-color: #f8f5fd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7 5 5 5-5' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 16px;
  cursor: pointer;
}

#new-panels .new-panel input[type="number"],
#app input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#new-panels .new-panel input[type="number"]::-webkit-inner-spin-button,
#new-panels .new-panel input[type="number"]::-webkit-outer-spin-button,
#app input[type="number"]::-webkit-inner-spin-button,
#app input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
#new-panels .new-panel input[type="datetime-local"],
#app input[type="datetime-local"] { accent-color: #7c3aed; border-color: #e5dcf4; border-radius: 14px; background: #f8f5fd; }

#vm { scrollbar-width: thin; scrollbar-color: #bda8e3 #f7f3fc; }
#vm::-webkit-scrollbar { width: 6px; }
#vm::-webkit-scrollbar-track { background: #f7f3fc; }
#vm::-webkit-scrollbar-thumb { border: 1px solid #f7f3fc; border-radius: 99px; background: #bda8e3; }

#new-panels .new-community-list { max-height: none; overflow: visible; }
#new-panels .new-comment-menu > .new-panel-body { max-height: 42dvh; overflow-y: auto; }
#new-panels :is(.s4-vt, .s4-shapes, .nc-draft-dialog, .s4-cap) { scrollbar-width: thin; scrollbar-color: #bda8e3 #f7f3fc; }
#new-panels :is(.s4-vt, .s4-shapes, .nc-draft-dialog, .s4-cap)::-webkit-scrollbar { width: 6px; }
#new-panels :is(.s4-vt, .s4-shapes, .nc-draft-dialog, .s4-cap)::-webkit-scrollbar-thumb { border: 1px solid #f7f3fc; border-radius: 99px; background: #bda8e3; }
#s4 .s4-sheet-card label .vv-select { flex: 1 1 0; }
.fdl-player-controls label .vv-select { width: auto; min-width: 76px; flex: 0 1 98px; }
#new-panels .nc-existing-player > span { display: none; }

#new-panels .new-panel input[type="color"] {
  appearance: none; -webkit-appearance: none; width: 38px; height: 38px; padding: 3px; overflow: hidden;
  border: 1px solid #e5dcf4; border-radius: 50%; background: #fff; cursor: pointer;
}
#new-panels .new-panel input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#new-panels .new-panel input[type="color"]::-webkit-color-swatch,
#new-panels .new-panel input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

.vv-select { position: relative; display: block; min-width: 0; width: 100%; }
.vv-select-native,
.vv-audio-source {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important;
  padding: 0 !important; margin: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important;
}

.vv-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 9px 13px;
  border: 1px solid #e5dcf4; border-radius: 14px; color: #211735; background: #f8f5fd; font: inherit; font-size: 14px;
  text-align: start; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.vv-select-trigger:hover,
.vv-select.is-open .vv-select-trigger { border-color: #b99de9; background: #f5efff; box-shadow: 0 0 0 3px #7c3aed12; }
.vv-select-value { min-width: 0; overflow-wrap: anywhere; }
.vv-select-arrow { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: #7c3aed; transition: transform .18s ease; }
.vv-select-arrow svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vv-select.is-open .vv-select-arrow { transform: rotate(180deg); }
.vv-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.vv-select-menu { display: grid; gap: 3px; max-height: none; margin-top: 6px; padding: 5px; border: 1px solid #ece4f7; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px #38205412; }
.vv-select-menu[hidden],
.vv-audio-player[hidden] { display: none !important; }
.vv-select-option { width: 100%; min-height: 42px; padding: 9px 11px; border: 0; border-radius: 11px; background: transparent; color: #34264a; font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.vv-select-option:hover,
.vv-select-option:focus-visible,
.vv-select-option.selected { background: #f2ebfc; color: #652bc0; }
.vv-select-option:disabled { opacity: .45; cursor: not-allowed; }
.vv-select-error { display: block; padding: 5px 9px 0; color: #b4235a; font-size: 12px; }
.vv-select-error[hidden] { display: none; }

.vv-audio-player {
  display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 5px 8px;
  border: 1px solid #e7dcf5; border-radius: 24px; background: linear-gradient(100deg, #fbf9ff, #f1eafb); color: #6633bd;
}
.vv-audio-play { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(145deg, #9635f5, #5521d7); color: #fff; box-shadow: 0 3px 9px #6b32d132; cursor: pointer; }
.vv-audio-play svg { width: 17px; height: 17px; fill: currentColor; }
.vv-audio-play:disabled { opacity: .5; cursor: not-allowed; }
.vv-audio-wave { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 32px; height: 30px; overflow: hidden; direction: rtl; cursor: pointer; touch-action: pan-y; }
.vv-audio-bars { display: flex; align-items: center; justify-content: space-between; gap: 2px; width: 100%; height: 100%; }
.vv-audio-bars i { display: block; flex: 1 1 2px; min-width: 1px; max-width: 4px; height: var(--bar-height); border-radius: 8px; background: #c8b8e7; transition: background-color .12s linear; }
.vv-audio-bars i.played { background: #7135ce; }
.vv-audio-time { flex: none; min-width: 30px; color: #6533b5; font-size: 11px; font-weight: 700; text-align: center; direction: ltr; }

@media (prefers-reduced-motion: reduce) {
  .vv-select-trigger, .vv-select-arrow, .vv-audio-bars i { transition: none !important; }
}