/* TALKCHAT_R19C12R9R16_MOBILE_GIFT_FIXED_LAYOUT
   Mobile-only gift layout.
   Goal:
   - category chips remain visible
   - gift catalog is the scrolling region
   - send button always remains visible at the bottom
   - works across the full <=767px mobile breakpoint
   - desktop r10/r10r1 centered gift modal remains untouched
*/

@media (max-width:767px){

  /* Normalize the gift feature into one full-height mobile sheet.
     Use the same visualViewport-backed variable already maintained by app.js,
     so the sheet also shrinks correctly while the software keyboard is open. */
  #featureLayer > .social-popup.profile-popup.profile-gift-popup{
    position:fixed!important;
    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:auto!important;

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

    height:var(--visible-height,100dvh)!important;
    min-height:0!important;
    max-height:var(--visible-height,100dvh)!important;

    margin:0!important;
    border:0!important;
    border-radius:0!important;

    display:flex!important;
    flex-direction:column!important;

    background:#ffffff!important;
    color:#172033!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }

  #featureLayer > .profile-gift-popup > header{
    flex:0 0 52px!important;
    min-height:52px!important;
    height:52px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;

    padding:0 13px!important;
    margin:0!important;

    background:#ffffff!important;
    color:#172033!important;
    border:0!important;
    border-bottom:1px solid #e5ebf1!important;
    box-sizing:border-box!important;
  }

  #featureLayer > .profile-gift-popup > header strong{
    color:#172033!important;
    font-size:14px!important;
    font-weight:800!important;
  }

  #featureLayer > .profile-gift-popup > header button{
    width:36px!important;
    height:36px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#64748b!important;
  }

  /* Explicit 2-column/8-row structure:
       row 1  target + balance
       row 2  categories
       row 3  gift catalog (ONLY main scroll region)
       row 4  optional message
       row 5  anonymous + history
       row 6  history results
       row 7  alert
       row 8  fixed send button
     Empty category/history rows collapse naturally.
  */
  #featureLayer > .profile-gift-popup > #profileGiftForm{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto!important;
    gap:8px 9px!important;
    align-content:stretch!important;

    padding:10px 10px max(10px,env(safe-area-inset-bottom))!important;
    margin:0!important;
    box-sizing:border-box!important;

    overflow:hidden!important;
    background:#ffffff!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-target{
    grid-column:1!important;
    grid-row:1!important;

    min-width:0!important;
    min-height:34px!important;
    margin:0!important;

    display:flex!important;
    align-items:center!important;

    color:#64748b!important;
    font-size:11px!important;
    line-height:1.25!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-target b{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#172033!important;
    font-weight:800!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-balance{
    grid-column:2!important;
    grid-row:1!important;

    min-height:34px!important;
    margin:0!important;
    padding:0 9px!important;

    display:flex!important;
    align-items:center!important;
    gap:4px!important;

    border:1px solid #dce5ee!important;
    border-radius:999px!important;
    background:#f7f9fc!important;
    color:#475569!important;

    white-space:nowrap!important;
    font-size:10px!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-balance b{
    color:#172033!important;
    font-weight:800!important;
  }

  /* Categories do not scroll away with the gift catalog. */
  #featureLayer > .profile-gift-popup .gift-catalog-tabs{
    grid-column:1/-1!important;
    grid-row:2!important;

    min-width:0!important;
    min-height:34px!important;
    max-height:34px!important;

    display:flex!important;
    align-items:center!important;
    gap:6px!important;

    margin:0!important;
    padding:0 0 2px!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;

    background:#ffffff!important;
  }

  #featureLayer > .profile-gift-popup .gift-catalog-tabs::-webkit-scrollbar{
    display:none!important;
  }

  #featureLayer > .profile-gift-popup .gift-catalog-tabs button{
    flex:0 0 auto!important;

    min-height:30px!important;
    height:30px!important;
    margin:0!important;
    padding:0 11px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce5ee!important;
    border-radius:999px!important;
    background:#f8fafc!important;
    color:#64748b!important;

    font-size:10.5px!important;
    font-weight:750!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #featureLayer > .profile-gift-popup .gift-catalog-tabs button.active{
    border-color:#90caf2!important;
    background:#eaf5ff!important;
    color:#087cc5!important;
  }

  /* The catalog is the only large scrolling region. */
  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full{
    grid-column:1/-1!important;
    grid-row:3!important;

    min-height:0!important;
    max-height:none!important;

    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:max-content!important;
    align-content:start!important;
    gap:7px!important;

    margin:0!important;
    padding:1px 3px 4px 0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;

    scrollbar-width:thin!important;
    scrollbar-color:#c6d1dd transparent!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label{
    min-width:0!important;
    min-height:105px!important;

    display:grid!important;
    grid-template-rows:54px auto auto!important;
    place-items:center!important;
    align-content:start!important;
    gap:3px!important;

    padding:7px 5px!important;
    margin:0!important;

    border:1px solid #e2e8f0!important;
    border-radius:10px!important;
    background:#ffffff!important;
    color:#172033!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label:has(input:checked){
    border-color:#62b5ec!important;
    box-shadow:inset 0 0 0 1px #62b5ec!important;
    background:#eef8ff!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full .gift-image,
  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full .gift-emoji{
    width:54px!important;
    height:54px!important;
    box-sizing:border-box!important;
    object-fit:contain!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full .gift-image{
    padding:2px!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full .gift-emoji{
    display:grid!important;
    place-items:center!important;
    font-size:31px!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label>b{
    max-width:100%!important;
    color:#172033!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:750!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #featureLayer > .profile-gift-popup .gift-price{
    min-height:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:2px!important;
    color:#b56c00!important;
    font-size:9.5px!important;
    font-weight:800!important;
  }

  #featureLayer > .profile-gift-popup textarea[name="message"]{
    grid-column:1/-1!important;
    grid-row:4!important;

    width:100%!important;
    min-height:44px!important;
    max-height:44px!important;

    margin:0!important;
    padding:8px 9px!important;
    resize:none!important;

    border:1px solid #d9e2ec!important;
    border-radius:8px!important;
    background:#f8fafc!important;
    color:#172033!important;

    font-size:11px!important;
    box-sizing:border-box!important;
  }

  #featureLayer > .profile-gift-popup textarea[name="message"]::placeholder{
    color:#8a98a9!important;
    opacity:1!important;
  }

  #featureLayer > .profile-gift-popup textarea[name="message"]:focus{
    outline:0!important;
    border-color:#62b5ec!important;
    box-shadow:0 0 0 3px rgba(33,150,243,.10)!important;
    background:#ffffff!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-anon{
    grid-column:1!important;
    grid-row:5!important;

    min-width:0!important;
    min-height:32px!important;
    margin:0!important;

    display:flex!important;
    align-items:center!important;
    gap:6px!important;

    color:#475569!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-anon input{
    width:16px!important;
    height:16px!important;
    margin:0!important;
    flex:0 0 auto!important;
  }

  #featureLayer > .profile-gift-popup .gift-history-toggle{
    grid-column:2!important;
    grid-row:5!important;

    min-height:32px!important;
    margin:0!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    border:1px solid #dce5ee!important;
    border-radius:8px!important;
    background:#f8fafc!important;
    color:#64748b!important;

    font-size:10px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }

  #featureLayer > .profile-gift-popup .gift-history{
    grid-column:1/-1!important;
    grid-row:6!important;

    min-height:0!important;
    max-height:82px!important;
    margin:0!important;
    padding:0!important;

    overflow:auto!important;
    overscroll-behavior:contain!important;
  }

  #featureLayer > .profile-gift-popup .gift-history[hidden]{
    display:none!important;
  }

  #featureLayer > .profile-gift-popup .gift-history article{
    min-width:0!important;
    padding:6px!important;
    gap:6px!important;
    border-color:#e5ebf1!important;
    background:#ffffff!important;
  }

  #featureLayer > .profile-gift-popup [role="alert"]{
    grid-column:1/-1!important;
    grid-row:7!important;

    min-height:0!important;
    margin:0!important;
    padding:0 2px!important;

    color:#dc2626!important;
    font-size:10px!important;
    line-height:1.2!important;
  }

  /* Bottom action never scrolls away. */
  #featureLayer > .profile-gift-popup .feature-primary[type="submit"]{
    grid-column:1/-1!important;
    grid-row:8!important;

    width:100%!important;
    min-height:46px!important;
    height:46px!important;

    margin:0!important;
    padding:0 14px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;

    border:0!important;
    border-radius:10px!important;
    background:#168de0!important;
    color:#ffffff!important;

    font-size:13px!important;
    font-weight:800!important;
    box-shadow:0 -1px 0 rgba(255,255,255,.35),0 4px 12px rgba(22,141,224,.20)!important;
  }

  #featureLayer > .profile-gift-popup .feature-primary[type="submit"]:disabled{
    opacity:.55!important;
  }
}

/* Dark mode gets a real dark gift surface rather than inheriting the legacy
   light-only profile gift rules. */
@media (max-width:767px){
  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup.profile-gift-popup,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup > header,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup > #profileGiftForm,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-catalog-tabs{
    background:#151f2b!important;
    color:#e8eef5!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup > header{
    border-bottom-color:#2b3745!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup > header strong,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-target b,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-balance b{
    color:#eef4fa!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup > header button,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-target{
    color:#9caabc!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-balance,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-catalog-tabs button,
  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-history-toggle{
    background:#111922!important;
    border-color:#2b3948!important;
    color:#a8b5c4!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-catalog-tabs button.active{
    background:#173b56!important;
    border-color:#2f6d98!important;
    color:#67bdff!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full{
    scrollbar-color:#3b4c5f transparent!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label{
    background:#182430!important;
    border-color:#2b3948!important;
    color:#e8eef5!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label:has(input:checked){
    background:#19344a!important;
    border-color:#3d8dbc!important;
    box-shadow:inset 0 0 0 1px #3d8dbc!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label>b{
    color:#e8eef5!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-price{
    color:#f2bd64!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup textarea[name="message"]{
    background:#111922!important;
    border-color:#2b3948!important;
    color:#eef4fa!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup textarea[name="message"]::placeholder{
    color:#748397!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup textarea[name="message"]:focus{
    background:#111922!important;
    border-color:#3c88b8!important;
    box-shadow:0 0 0 3px rgba(60,136,184,.12)!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .profile-gift-anon{
    color:#c3cfda!important;
  }

  html[data-theme="dark"] #featureLayer > .profile-gift-popup .gift-history article{
    background:#182430!important;
    border-color:#2b3948!important;
    color:#e8eef5!important;
  }
}

/* Very narrow phones keep the same fixed behavior with slightly tighter cards. */
@media (max-width:360px){
  #featureLayer > .profile-gift-popup > #profileGiftForm{
    gap:7px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-balance{
    padding:0 7px!important;
    font-size:9.5px!important;
  }

  #featureLayer > .profile-gift-popup .profile-gift-choices.gift-full label{
    min-height:99px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #featureLayer > .profile-gift-popup .gift-history-toggle{
    padding:0 7px!important;
    font-size:9.5px!important;
  }
}