/* ==========================================================
   ELEVN SHARE S2B
   Dedicated native-like Share experience

   Scope:
   - mobile Share modal only
   - desktop unchanged
   - legacy elevn-mobile.css untouched
   ========================================================== */

.elevn-share-mobile-actions {
  display: none;
}


@media (max-width: 767.98px) {

  /* --------------------------------------------------------
     Bottom-sheet root
     -------------------------------------------------------- */

  #modal.elevn-share-sheet {
    padding: 0 !important;
  }


  #modal.elevn-share-sheet .modal-dialog {
    display: flex;

    align-items: flex-end;

    width: 100% !important;
    max-width: none !important;

    height: 100%;
    min-height: 100% !important;

    margin: 0 !important;

    pointer-events: none;
  }


  #modal.elevn-share-sheet.fade .modal-dialog {
    transform:
      translate3d(0, 104%, 0) !important;

    transition:
      transform
      280ms
      cubic-bezier(0.22, 1, 0.36, 1) !important;
  }


  #modal.elevn-share-sheet.show .modal-dialog {
    transform:
      translate3d(0, 0, 0) !important;
  }


  #modal.elevn-share-sheet .modal-content {
    display: flex;

    flex-direction: column;

    width: 100%;

    max-height: 86vh;
    max-height: 86dvh;

    margin: 0;

    overflow: hidden;

    pointer-events: auto;

    border: 0 !important;

    border-radius:
      28px 28px 0 0 !important;

    box-shadow:
      0 -18px 60px
      rgba(0, 0, 0, 0.34);
  }


  /* --------------------------------------------------------
     Native-style visual handle
     -------------------------------------------------------- */

  #modal.elevn-share-sheet .modal-header {
    position: relative;

    flex: 0 0 auto;

    padding-top: 26px;
  }


  #modal.elevn-share-sheet .modal-header::before {
    content: "";

    position: absolute;

    top: 9px;
    left: 50%;

    width: 38px;
    height: 4px;

    border-radius: 999px;

    background:
      rgba(127, 127, 127, 0.48);

    transform:
      translateX(-50%);

    pointer-events: none;
  }


  /* --------------------------------------------------------
     Publisher form must remain scroll-safe inside sheet
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .modal-content
  > form.js_ajax-forms {
    display: flex;

    flex: 1 1 auto;
    flex-direction: column;

    min-height: 0;

    overflow: hidden;
  }


  #modal.elevn-share-sheet .modal-body {
    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling:
      touch;
  }


  #modal.elevn-share-sheet .modal-footer {
    flex: 0 0 auto;

    padding-bottom:
      calc(
        12px
        + env(safe-area-inset-bottom, 0px)
      );
  }


  /* --------------------------------------------------------
     Native Share + Copy quick actions
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .elevn-share-mobile-actions {
    display: flex;

    gap: 12px;

    width: 100%;

    margin:
      2px 0 22px;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action-slot {
    flex: 1 1 0;

    min-width: 0;
  }


  /*
   * Existing Copy engine requires:
   * .elevn-share-copy .js_elevn-copy
   *
   * Neutralize legacy input-row styling only for
   * the new quick Copy slot.
   */
  #modal.elevn-share-sheet
  .elevn-share-copy.elevn-share-copy-quick {
    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    overflow:
      visible !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    gap: 10px;

    padding:
      10px 14px;

    font: inherit;
    font-weight: 600;

    color: inherit;

    background:
      rgba(127, 127, 127, 0.10);

    border:
      1px solid
      rgba(127, 127, 127, 0.16);

    border-radius: 16px;

    cursor: pointer;

    touch-action:
      manipulation;

    -webkit-tap-highlight-color:
      transparent;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action[hidden] {
    display: none !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    border-radius: 50%;

    color:
      #2d7bff;

    background:
      rgba(45, 123, 255, 0.12);
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action:active {
    transform:
      scale(0.97);
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action.elevn-copied {
    color:
      #16a34a;

    border-color:
      rgba(22, 163, 74, 0.30);

    background:
      rgba(22, 163, 74, 0.10);
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action.elevn-copied
  .elevn-share-mobile-action-icon {
    color:
      #16a34a;

    background:
      rgba(22, 163, 74, 0.12);
  }


  /* --------------------------------------------------------
     Replace old raw link rows with quick Copy
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .elevn-share-modal
  > div[style*="margin: 25px auto"] {
    display:
      none !important;
  }


  /* --------------------------------------------------------
     Web Share available:
     OS Share sheet replaces fixed Facebook/X/etc list.

     Web Share unavailable:
     legacy social actions remain visible as fallback.
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .elevn-share-modal.elevn-share-native-supported
  .post-social-share {
    display:
      none !important;
  }


  /*
   * Photo link / Post link headings are useful only
   * when legacy social fallback remains visible.
   */
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal.elevn-share-native-supported
  > .h6.text-center {
    display:
      none !important;
  }


  /* --------------------------------------------------------
     S2A destinations: Timeline / Page / Event
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .mb20.text-center {
    display:
      grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      10px !important;
  }


  /* --------------------------------------------------------
     Mobile bottom navigation outside active Share layer
     -------------------------------------------------------- */

  body.elevn-share-sheet-open
  .footer-bottom-bar {
    display:
      none !important;

    visibility:
      hidden !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }

}


/* ==========================================================
   DESKTOP
   Existing centered Share modal remains canonical.
   ========================================================== */

@media (min-width: 768px) {

  .elevn-share-mobile-actions {
    display:
      none !important;
  }

}

/* ==========================================================
   END — ELEVN SHARE S2B
   ========================================================== */


/* ==========================================================
   ELEVN SHARE S2C
   Comments visual parity + zero native-social flash

   Design contract:
   - Comments remains the visual shell reference
   - Share remains content-driven, not forced to Comments height
   - native-capable state exists before first modal paint
   - legacy social fallback remains available if native Share
     is unsupported or fails at runtime
   ========================================================== */

@media (max-width: 767.98px) {

  /* --------------------------------------------------------
     COMMENTS PARITY — ROOT / BACKDROP
     -------------------------------------------------------- */

  body.elevn-share-sheet-open {
    overflow:
      hidden !important;
  }


  #modal.elevn-share-sheet {
    z-index:
      10901 !important;
  }


  body.elevn-share-sheet-open
  .modal-backdrop.show {
    z-index:
      10900 !important;

    background:
      #000 !important;

    opacity:
      0.58 !important;

    -webkit-backdrop-filter:
      blur(2px);

    backdrop-filter:
      blur(2px);
  }


  /* --------------------------------------------------------
     COMMENTS PARITY — SHELL

     Comments:
       radius  = 28px
       shadow  = rgba(... .38)
       max visual family = 78dvh

     Share stays content-driven but cannot become taller than
     the Comments visual envelope.
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .modal-content {
    max-height:
      78vh !important;

    max-height:
      78dvh !important;

    border-radius:
      28px 28px 0 0 !important;

    box-shadow:
      0 -18px 60px
      rgba(0, 0, 0, 0.38) !important;
  }


  /* --------------------------------------------------------
     COMMENTS PARITY — HEADER
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .modal-header {
    position:
      relative;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    min-height:
      58px;

    padding:
      24px 16px 10px !important;

    border-bottom:
      1px solid
      rgba(127, 127, 127, 0.18) !important;

    background:
      inherit;
  }


  #modal.elevn-share-sheet
  .modal-header::before {
    top:
      8px;

    width:
      42px;

    height:
      4px;

    background:
      currentColor;

    opacity:
      0.48;
  }


  #modal.elevn-share-sheet
  .modal-title {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    margin:
      0 auto;

    font-size:
      17px;

    line-height:
      1.25;

    font-weight:
      700;

    letter-spacing:
      -0.2px;
  }


  /*
   * Comments header is text-first.
   * Remove the legacy Share glyph on mobile only.
   */
  #modal.elevn-share-sheet
  .modal-title
  .main-icon {
    display:
      none !important;
  }


  #modal.elevn-share-sheet
  .modal-header
  .btn-close {
    position:
      absolute;

    top:
      calc(50% + 6px);

    right:
      16px;

    width:
      34px;

    height:
      34px;

    margin:
      0 !important;

    padding:
      0 !important;

    transform:
      translateY(-50%);

    border:
      0 !important;

    border-radius:
      50%;

    background-color:
      transparent;

    background-size:
      14px;

    opacity:
      0.72;
  }


  /* --------------------------------------------------------
     COMPACT SHARE RHYTHM
     -------------------------------------------------------- */

  #modal.elevn-share-sheet
  .modal-body {
    padding:
      14px 16px 10px !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-actions {
    gap:
      10px;

    margin:
      0 0 16px;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action {
    min-height:
      54px;

    gap:
      8px;

    padding:
      8px 12px;

    border-radius:
      14px;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action-icon {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  > .h5.text-center {
    margin:
      12px 0 10px !important;

    font-size:
      17px;

    line-height:
      1.25;

    font-weight:
      700;

    letter-spacing:
      -0.2px;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .mb20.text-center {
    margin-bottom:
      14px !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  textarea[name="message"] {
    min-height:
      88px !important;

    height:
      88px;

    font-size:
      16px !important;

    border-radius:
      14px !important;

    resize:
      none;
  }


  #modal.elevn-share-sheet
  .modal-footer {
    padding:
      10px
      16px
      calc(
        10px
        + env(safe-area-inset-bottom, 0px)
      ) !important;

    border-top:
      1px solid
      rgba(127, 127, 127, 0.18) !important;

    background:
      inherit;
  }


  #modal.elevn-share-sheet
  .elevn-share-submit {
    min-height:
      50px;

    border-radius:
      14px;
  }


  /* --------------------------------------------------------
     ZERO FLASH

     native-capable is applied to #modal before Sngine opens
     and injects the publisher.

     Therefore the old Facebook/X/LinkedIn/WhatsApp row is
     already hidden on the very first paint.

     Runtime native failure removes native-capable and the
     legacy fallback becomes visible again.
     -------------------------------------------------------- */

  #modal.elevn-share-sheet.elevn-share-native-capable
  .post-social-share {
    display:
      none !important;
  }


  #modal.elevn-share-sheet.elevn-share-native-capable
  .elevn-share-publisher-modal
  > .h6.text-center {
    display:
      none !important;
  }

}

/* ==========================================================
   END — ELEVN SHARE S2C
   ========================================================== */


/* ==========================================================
   ELEVN SHARE S2D
   True Comments UX unification

   Contract:
   - Share shell is fixed to the viewport like Comments
   - shell itself cannot scroll / drift vertically
   - only modal-body may scroll
   - exact Comments light/dark palette
   - footer remains mounted behind Share instead of popping
     back into existence after Bootstrap closes
   ========================================================== */

@media (max-width: 767.98px) {

  /* ========================================================
     1. EXACT COMMENTS DESIGN TOKENS
     ======================================================== */

  #modal.elevn-share-sheet .modal-content {
    --elevn-share-surface: #f6f8fa;
    --elevn-share-raised: #ffffff;
    --elevn-share-input: #f1f4f7;

    --elevn-share-text: #161b22;
    --elevn-share-muted: #74808d;

    --elevn-share-line: rgba(25, 43, 58, 0.10);
    --elevn-share-line-strong: rgba(25, 43, 58, 0.16);

    --elevn-share-accent: #007AFF;
    --elevn-share-accent-soft: rgba(0, 122, 255, 0.10);
    --elevn-share-accent-contrast: #ffffff;
  }


  body.night-mode
  #modal.elevn-share-sheet
  .modal-content {
    --elevn-share-surface: #141a20;
    --elevn-share-raised: #1a222a;
    --elevn-share-input: #202a34;

    --elevn-share-text: #f2f5f7;
    --elevn-share-muted: #9aa7b4;

    --elevn-share-line: rgba(178, 205, 226, 0.09);
    --elevn-share-line-strong: rgba(178, 205, 226, 0.15);

    --elevn-share-accent: #007AFF;
    --elevn-share-accent-soft: rgba(0, 122, 255, 0.10);
    --elevn-share-accent-contrast: #ffffff;
  }


  /* ========================================================
     2. VIEWPORT-LOCKED SHELL

     Bootstrap #modal remains the lifecycle owner.
     It must NOT remain the scrolling surface.

     The actual dialog is now the same fixed-bottom geometry
     used by Comments.
     ======================================================== */

  #modal.elevn-share-sheet {
    overflow:
      hidden !important;

    overscroll-behavior:
      none;

    -webkit-overflow-scrolling:
      auto;
  }


  #modal.elevn-share-sheet
  .modal-dialog {
    position:
      fixed !important;

    left:
      0 !important;

    right:
      0 !important;

    top:
      auto !important;

    bottom:
      0 !important;

    display:
      flex !important;

    align-items:
      stretch !important;

    width:
      100% !important;

    max-width:
      none !important;

    height:
      78vh !important;

    height:
      78dvh !important;

    min-height:
      0 !important;

    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top, 0px)
        - 12px
      ) !important;

    margin:
      0 !important;

    overscroll-behavior:
      none;

    pointer-events:
      none;

    will-change:
      transform;
  }


  /*
   * Keep Bootstrap's opening/closing state,
   * but on the fixed viewport shell.
   */
  #modal.elevn-share-sheet.fade
  .modal-dialog {
    transform:
      translate3d(0, 104%, 0) !important;
  }


  #modal.elevn-share-sheet.show
  .modal-dialog {
    transform:
      translate3d(0, 0, 0) !important;
  }


  #modal.elevn-share-sheet
  .modal-content {
    width:
      100% !important;

    height:
      100% !important;

    max-height:
      none !important;

    min-height:
      0;

    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-surface) !important;

    border-radius:
      28px 28px 0 0 !important;

    box-shadow:
      0 -18px 60px
      rgba(0, 0, 0, 0.38) !important;

    overflow:
      hidden !important;

    pointer-events:
      auto;
  }


  /* ========================================================
     3. ONLY THE CONTENT AREA MAY SCROLL
     ======================================================== */

  #modal.elevn-share-sheet
  .modal-content
  > form.js_ajax-forms {
    flex:
      1 1 auto;

    min-height:
      0;

    overflow:
      hidden;
  }


  #modal.elevn-share-sheet
  .modal-body {
    flex:
      1 1 auto;

    min-height:
      0;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior-y:
      contain;

    -webkit-overflow-scrolling:
      touch;

    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-surface) !important;
  }


  #modal.elevn-share-sheet
  .modal-header,
  #modal.elevn-share-sheet
  .modal-footer {
    flex:
      0 0 auto;

    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-surface) !important;

    border-color:
      var(--elevn-share-line) !important;
  }


  /* ========================================================
     4. EXACT COMMENTS VISUAL LANGUAGE
     ======================================================== */

  #modal.elevn-share-sheet
  .modal-title,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  > .h5.text-center,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .form-label {
    color:
      var(--elevn-share-text) !important;
  }


  #modal.elevn-share-sheet
  .modal-header::before {
    background:
      var(--elevn-share-muted) !important;

    opacity:
      0.48;
  }


  #modal.elevn-share-sheet
  .modal-header
  .btn-close {
    background-color:
      var(--elevn-share-accent-soft) !important;

    opacity:
      1;
  }


  /* ---------- Native Share / Copy ---------- */

  #modal.elevn-share-sheet
  .elevn-share-mobile-action {
    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-raised) !important;

    border:
      1px solid
      var(--elevn-share-line) !important;

    box-shadow:
      none !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-mobile-action-icon {
    color:
      var(--elevn-share-accent) !important;

    background:
      var(--elevn-share-accent-soft) !important;
  }


  /* ---------- Timeline / Page / Event ---------- */

  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .button-label {
    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-raised) !important;

    border:
      1px solid
      var(--elevn-share-line) !important;

    box-shadow:
      none !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .button-label
  .title {
    color:
      inherit !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .button-label
  .main-icon,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .button-label
  .main-icon * {
    color:
      var(--elevn-share-muted) !important;

    fill:
      var(--elevn-share-muted) !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .input-label:checked
  + .button-label {
    color:
      var(--elevn-share-accent) !important;

    background:
      var(--elevn-share-accent-soft) !important;

    border-color:
      var(--elevn-share-accent) !important;

    box-shadow:
      0 0 0 2px
      var(--elevn-share-accent-soft) !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .input-label:checked
  + .button-label
  .main-icon,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .input-label:checked
  + .button-label
  .main-icon * {
    color:
      var(--elevn-share-accent) !important;

    fill:
      var(--elevn-share-accent) !important;
  }


  /* ---------- Message / selectors ---------- */

  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  textarea[name="message"],
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .form-select,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .form-control {
    color:
      var(--elevn-share-text) !important;

    background:
      var(--elevn-share-input) !important;

    border:
      1px solid
      var(--elevn-share-line) !important;

    box-shadow:
      0 1px 0
      rgba(255, 255, 255, 0.02)
      inset !important;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  textarea[name="message"]::placeholder {
    color:
      var(--elevn-share-muted) !important;

    opacity:
      0.9;
  }


  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  textarea[name="message"]:focus,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .form-select:focus,
  #modal.elevn-share-sheet
  .elevn-share-publisher-modal
  .form-control:focus {
    border-color:
      var(--elevn-share-accent) !important;

    box-shadow:
      0 0 0 3px
      var(--elevn-share-accent-soft) !important;
  }


  /* ---------- Primary Share ---------- */

  #modal.elevn-share-sheet
  .elevn-share-submit {
    color:
      var(--elevn-share-accent-contrast) !important;

    background:
      var(--elevn-share-accent) !important;

    border-color:
      var(--elevn-share-accent) !important;

    box-shadow:
      none !important;
  }


  /* ========================================================
     5. FOOTER CONTINUITY

     Old S2B rule physically removed footer-bottom-bar.

     S2D deliberately keeps it mounted at its normal global
     z-index. Share backdrop/drawer are far above it, so it is
     naturally occluded and progressively revealed on close.

     No delayed display:none -> display transition.
     ======================================================== */

  body.elevn-share-sheet-open
  .footer-bottom-bar {
    display:
      block !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    pointer-events:
      auto !important;
  }

}

/* ==========================================================
   END — ELEVN SHARE S2D
   ========================================================== */