/* Avelune v0.20.32 — mobile Avelune AI recommendation carousel action-row fit refinement.
   Scope: recommendation results inside Your Avelune Concierge only.
   Home and the locked main Trip screen are intentionally untouched. */

@media (max-width:760px){
  /* Keep the Concierge vertically scrollable. Horizontal movement remains
     isolated to recommendation tracks so vertical page movement stays natural. */
  #avenueAiDialog #avenueAiBody{
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  #avenueAiDialog .avenueAiResults,
  #avenueAiDialog .avenueAiDay,
  #avenueAiDialog .avenueAiGap{
    min-width:0!important;
    max-width:100%!important;
  }

  #avenueAiDialog .avenueAiMobileCounter{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:4px!important;
    min-height:20px!important;
    margin:0 20px 4px!important;
    color:#71838b!important;
    font-size:12px!important;
    font-weight:750!important;
    letter-spacing:.02em!important;
    line-height:1!important;
    user-select:none!important;
    pointer-events:none!important;
  }

  #avenueAiDialog .avenueAiCarousel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  #avenueAiDialog .avenueAiCarouselArrow{display:none!important}
  #avenueAiDialog .avenueAiRecommendations{
    display:flex!important;
    align-items:stretch!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 clamp(18px,5.5vw,24px) 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:clamp(18px,5.5vw,24px)!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    touch-action:pan-x pan-y!important;
    cursor:grab;
  }
  #avenueAiDialog .avenueAiRecommendations:active{cursor:grabbing}
  #avenueAiDialog .avenueAiRecommendations::-webkit-scrollbar{display:none!important}

  /* Keep the same Home-inspired side peek, but reduce the card's vertical
     footprint so the complete recommendation including actions fits in the
     visible Concierge result area on common iPhone sizes. */
  #avenueAiDialog .avenueAiRec{
    flex:0 0 86%!important;
    width:86%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always!important;
    overflow:hidden!important;
    align-self:stretch!important;
  }

  #avenueAiDialog .avenueAiRecMedia{
    width:100%!important;
    height:clamp(102px,14.5dvh,126px)!important;
    min-height:0!important;
    max-height:126px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #avenueAiDialog .avenueAiRecMedia img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
  }
  #avenueAiDialog .avenueAiRecContent{
    padding:10px 14px 8px!important;
  }
  #avenueAiDialog .avenueAiRecTop h5{
    margin-top:2px!important;
    margin-bottom:0!important;
    font-size:clamp(23px,6vw,28px)!important;
    line-height:1.01!important;
  }
  #avenueAiDialog .avenueAiType{
    font-size:11px!important;
    line-height:1.15!important;
  }
  #avenueAiDialog .avenueAiMetrics{
    display:flex!important;
    flex-wrap:wrap!important;
    column-gap:10px!important;
    row-gap:2px!important;
    margin-top:5px!important;
    font-size:12.5px!important;
    line-height:1.25!important;
  }
  #avenueAiDialog .avenueAiRecNotices{
    margin-top:5px!important;
  }
  #avenueAiDialog .avenueAiRecNotices>span{
    padding-block:4px!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  #avenueAiDialog .avenueAiWhy{
    margin-top:7px!important;
    padding-top:7px!important;
  }
  #avenueAiDialog .avenueAiWhy>b{
    font-size:12.5px!important;
    line-height:1.18!important;
  }
  #avenueAiDialog .avenueAiWhy p{
    margin:3px 0 5px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    font-size:12.75px!important;
    line-height:1.24!important;
  }
  #avenueAiDialog .avenueAiWhy small{
    font-size:12px!important;
    line-height:1.18!important;
  }
  /* Keep all three actions on one line without allowing the primary button
     to force Save/Details outside the card. The proportions intentionally
     favor Add to itinerary while guaranteeing readable secondary actions. */
  #avenueAiDialog .avenueAiActions{
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(0,.58fr) minmax(0,.72fr)!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    gap:4px!important;
    margin-top:8px!important;
  }
  #avenueAiDialog .avenueAiActions>button{
    min-width:0!important;
    min-height:44px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:7px 4px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    text-align:center!important;
    justify-content:center!important;
    font-size:clamp(10px,2.8vw,11.5px)!important;
    letter-spacing:-.01em!important;
    line-height:1.05!important;
  }
  #avenueAiDialog .avenueAiActions>.confirm{
    width:100%!important;
    min-width:0!important;
    padding-inline:6px!important;
    font-size:clamp(10.25px,2.9vw,11.75px)!important;
  }
  #avenueAiDialog .avenueAiActions>[data-ai-save],
  #avenueAiDialog .avenueAiActions>[data-ai-details]{
    padding-inline:2px!important;
    font-size:clamp(9.75px,2.65vw,11px)!important;
  }

  /* Give the result area a little more usable room without changing the
     overall Concierge design language or the bottom Create my day workflow. */
  #avenueAiDialog .avenueAiGap{margin-bottom:8px!important}
  #avenueAiDialog .avenueAiMore{margin-top:6px!important}
}

@media (max-width:360px){
  #avenueAiDialog .avenueAiRec{flex-basis:84%!important;width:84%!important}
  #avenueAiDialog .avenueAiRecMedia{height:98px!important;max-height:98px!important}
  #avenueAiDialog .avenueAiRecContent{padding:9px 12px 8px!important}
  #avenueAiDialog .avenueAiRecTop h5{font-size:22px!important}
  #avenueAiDialog .avenueAiActions{
    grid-template-columns:minmax(0,1.52fr) minmax(0,.56fr) minmax(0,.72fr)!important;
    gap:3px!important;
  }
  #avenueAiDialog .avenueAiActions>button{font-size:9.75px!important;padding-inline:2px!important}
  #avenueAiDialog .avenueAiActions>.confirm{font-size:10px!important;padding-inline:3px!important}
}

/* Batch 5 — the same compact hierarchy and equal card rhythm on touch. */
@media (max-width:760px){
  #avenueAiDialog .avenueAiRec{position:relative!important;flex-basis:82%!important;width:82%!important;height:404px!important;min-height:404px!important}
  #avenueAiDialog .avenueAiRecMedia{height:124px!important;min-height:124px!important;max-height:124px!important}
  #avenueAiDialog .avenueAiRecContent{height:280px!important;min-height:0!important;padding:10px 12px 10px!important}
  #avenueAiDialog .avenueAiRecTop h5{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:38px!important;font-size:18px!important;line-height:1.06!important}
  #avenueAiDialog .avenueAiType{font-size:9px!important}
  #avenueAiDialog .avenueAiMetrics{max-height:31px!important;overflow:hidden!important;font-size:10.5px!important;line-height:1.2!important}
  #avenueAiDialog .avenueAiRecNotices{max-height:28px!important;overflow:hidden!important}
  #avenueAiDialog .avenueAiRecNotices>span{padding:3px 5px!important;font-size:9.5px!important}
  #avenueAiDialog .avenueAiWhy>b{font-size:10px!important}
  #avenueAiDialog .avenueAiWhy p{font-size:11px!important;line-height:1.25!important}
  #avenueAiDialog .avenueAiWhy small{font-size:10px!important}
  #avenueAiDialog .avenueAiPlacement{margin-top:auto!important;padding-top:6px!important;font-size:9px!important;letter-spacing:.12em!important}
  #avenueAiDialog .avenueAiActions{margin-top:auto!important;padding-top:7px!important;grid-template-columns:minmax(0,1.4fr) minmax(0,.62fr) minmax(0,.75fr)!important}
  #avenueAiDialog .avenueAiActions>button{min-height:38px!important;font-size:10px!important}
  #avenueAiDialog .googlePhotoAttribution{top:87px!important;font-size:7.5px!important}
}

/* Batch 6B — mobile cards keep every fixed metadata/action region readable. */
@media (max-width:760px){
  #avenueAiDialog .avenueAiRec{height:540px!important;min-height:540px!important}
  #avenueAiDialog .avenueAiRecMedia{height:150px!important;min-height:150px!important;max-height:150px!important}
  #avenueAiDialog .avenueAiRecContent{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-rows:auto auto auto minmax(76px,1fr) auto auto auto!important;
    gap:6px!important;
    height:390px!important;
    min-height:390px!important;
    padding:13px 14px 13px!important;
  }
  #avenueAiDialog .avenueAiRecTop h5{min-height:43px!important;margin:3px 0 0!important;font-size:20px!important;line-height:1.08!important}
  #avenueAiDialog .avenueAiType{font-size:10px!important;line-height:1.2!important}
  #avenueAiDialog .avenueAiMetrics{max-height:none!important;overflow:visible!important;margin:0!important;column-gap:9px!important;row-gap:3px!important;font-size:11.5px!important;line-height:1.25!important}
  #avenueAiDialog .avenueAiRecNotices{max-height:none!important;overflow:visible!important;margin:0!important;gap:4px!important}
  #avenueAiDialog .avenueAiRecNotices>span{padding:4px 6px!important;font-size:10.5px!important;line-height:1.2!important}
  #avenueAiDialog .avenueAiWhy{margin:0!important;padding-top:8px!important}
  #avenueAiDialog .avenueAiWhy>b{font-size:11.5px!important;line-height:1.2!important}
  #avenueAiDialog .avenueAiWhy p{min-height:54px!important;margin:5px 0 0!important;-webkit-line-clamp:3!important;font-size:13px!important;line-height:1.38!important}
  #avenueAiDialog .avenueAiTiming{font-size:11px!important;line-height:1.25!important}
  #avenueAiDialog .avenueAiPlacement{margin:0!important;padding-top:6px!important;font-size:10px!important;line-height:1.2!important}
  #avenueAiDialog .avenueAiActions{margin:0!important;padding:0!important}
  #avenueAiDialog .avenueAiActions>button{min-height:44px!important;font-size:11px!important}
  #avenueAiDialog .googlePhotoAttribution{top:126px!important;font-size:8px!important}
}

@media (max-width:760px){
  #avenueAiDialog .avenueAiRec{height:650px!important;min-height:650px!important}
  #avenueAiDialog .avenueAiRecContent{height:500px!important;min-height:500px!important}
  #avenueAiDialog .avenueAiActions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  #avenueAiDialog .avenueAiActions>.aiSelectRecommendation{min-height:48px!important;font-size:11px!important}
  #avenueAiDialog .avenueAiSecondaryActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  #avenueAiDialog .avenueAiSecondaryActions>button{min-height:38px!important;font-size:9.5px!important;padding:5px 3px!important}
  #avenueAiDialog .avenueAiRecMedia.aiPhotoFallback,#avenueAiDialog .avenueAiRecMedia.aiPhotoFallback img{background:#081A2F!important}
  #avenueAiDialog .avenueAiRecMedia.aiPhotoFallback img{object-fit:contain!important;object-position:center!important}
}