/* La Carte Eternelle — Alpha mobile responsive pass
   Mobile-only overrides. Desktop/tablet layouts above 820px are untouched. */

@media (max-width:820px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
  body,.app,main,.page,#lce-v10-journey,.lce-v10-stop{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body *{box-sizing:border-box}
  img,video,canvas,svg,iframe{max-width:100%!important}

  /* Mobile shell */
  .app{display:block!important;width:100%!important}
  .sidebar,
  body.lce-v10-browse .sidebar,
  body.lce-v10-detail .sidebar{
    position:sticky!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:auto!important;min-height:0!important;
    padding:8px 10px 9px!important;border-right:0!important;border-bottom:1px solid var(--v9-line,rgba(0,0,0,.08))!important;
    z-index:150!important;gap:7px!important;overflow:visible!important;
    -webkit-backdrop-filter:blur(22px)!important;backdrop-filter:blur(22px)!important
  }
  .sidebar .brand{padding:2px 7px!important}
  .sidebar .brand h1{font-size:18px!important;line-height:1.1!important;white-space:nowrap!important}
  .sidebar .brand p,.sidebar .sidebar-foot{display:none!important}
  #nav,
  body.lce-v10-browse #nav,
  body.lce-v10-detail #nav{
    display:flex!important;grid-template-columns:none!important;gap:6px!important;width:100%!important;max-width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;padding:2px 2px 3px!important;white-space:nowrap!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;scroll-snap-type:x proximity!important
  }
  #nav::-webkit-scrollbar{display:none!important}
  #nav button{flex:0 0 auto!important;min-height:38px!important;padding:8px 11px!important;border-radius:999px!important;font-size:12px!important;line-height:1!important;transform:none!important;scroll-snap-align:center!important}

  /* Page frame */
  main{width:100%!important;overflow:visible!important}
  .page,
  body.lce-v10-detail main>.page.active{
    width:100%!important;max-width:100%!important;padding:14px 10px 72px!important;margin:0!important;overflow-x:hidden!important
  }
  #lce-v10-journey{width:100%!important;max-width:100%!important;padding:14px 10px 88px!important;overflow:hidden!important}
  .lce-v10-stop{width:100%!important;margin:0 0 16px!important;padding-top:0!important;overflow:hidden!important}
  body.lce-v10-browse .lce-v10-stop:first-child .lce-v9-hero{padding-top:34px!important}
  #lce-v10-detailbar{top:76px!important;margin:0 0 12px!important;padding:0 2px!important;z-index:120!important}
  .lce-v10-back{min-height:42px!important;padding:8px 13px 8px 10px!important;font-size:13px!important}

  /* Main presentation cards */
  .lce-v9-hero{
    width:100%!important;max-width:100%!important;border-radius:22px!important;padding:34px 14px 18px!important;margin:0 0 16px!important;overflow:hidden!important
  }
  .lce-v9-copy{width:100%!important;max-width:100%!important;padding:0!important}
  .lce-v9-eyebrow{font-size:9px!important;letter-spacing:.12em!important;margin-bottom:10px!important}
  .lce-v9-title{max-width:100%!important;font-size:clamp(31px,10.6vw,43px)!important;line-height:1.01!important;letter-spacing:-.052em!important;overflow-wrap:anywhere!important}
  .lce-v9-desc{max-width:100%!important;margin-top:14px!important;font-size:15px!important;line-height:1.42!important;letter-spacing:-.02em!important}
  .lce-v9-sub{max-width:100%!important;margin-top:16px!important;font-size:13px!important;line-height:1.4!important}
  .lce-v9-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:380px!important;gap:8px!important;margin-top:18px!important}
  .lce-v9-actions button{width:100%!important;max-width:100%!important;min-height:44px!important;padding:10px 14px!important;font-size:14px!important}
  .lce-v9-visual-wrap{width:100%!important;max-width:100%!important;min-height:0!important;margin:20px auto 0!important;overflow:hidden!important}
  .lce-v9-scene{width:100%!important;max-width:100%!important;height:330px!important;min-height:0!important;overflow:hidden!important;transform:none!important}
  .lce-v9-scene-hint{display:none!important}
  .lce-v9-memory-frame{left:4%!important;right:4%!important;top:20px!important;bottom:28px!important;border-radius:30px!important;padding:10px!important;transform:none!important}
  .lce-v9-memory-photo{border-radius:22px!important}
  .lce-v9-memory-caption{left:18px!important;right:18px!important;bottom:17px!important;font-size:19px!important}
  .lce-v9-memory-caption small{margin-top:10px!important;font-size:8px!important}
  .lce-v9-scene-people{height:330px!important}
  .lce-v9-portrait{padding:8px!important;border-radius:26px!important}
  .lce-v9-portrait .lce-v9-photo{border-radius:20px!important}
  .lce-v9-portrait-main{left:4%!important;top:24px!important;width:59%!important;height:250px!important;transform:rotate(-2deg)!important}
  .lce-v9-portrait-side{right:3%!important;bottom:32px!important;width:42%!important;height:190px!important;transform:rotate(2deg)!important}
  .lce-v9-scene-capsule{height:305px!important}
  .lce-v9-capsule-shell{left:2%!important;right:2%!important;top:44px!important;height:190px!important;border-radius:70px!important}
  .lce-v9-capsule-note{left:8%!important;top:35px!important;width:42%!important;height:105px!important;border-radius:20px!important;font-size:18px!important}
  .lce-v9-capsule-photo{left:46%!important;top:32px!important;width:100px!important;height:105px!important;border-width:8px!important;border-bottom-width:24px!important}
  .lce-v9-capsule-flower{right:6%!important;top:44px!important;transform:scale(.72)!important;transform-origin:top right!important}
  .lce-v9-capsule-date{right:8%!important;bottom:19px!important;font-size:9px!important}
  .lce-v9-scene-legacy{height:330px!important}
  .lce-v9-legacy-box{left:3%!important;right:3%!important;top:25px!important;bottom:34px!important;border-radius:28px!important}
  .lce-v9-letter{left:6%!important;top:12%!important;width:55%!important;height:68%!important;padding:22px 14px!important}
  .lce-v9-letter span{font-size:16px!important}.lce-v9-letter small{left:14px!important;bottom:12px!important;font-size:7px!important}
  .lce-v9-polaroid{right:5%!important;top:28%!important;width:42%!important;height:46%!important;padding:7px 7px 24px!important}
  .lce-v9-flowers{right:-7%!important;top:3%!important;transform:scale(.64)!important;transform-origin:top right!important}
  .lce-v9-ribbon{left:3%!important;right:27%!important;height:23px!important}
  .lce-v9-scene-journal{height:330px!important}

  /* Generic responsive layouts */
  .grid,.split,.stats,.home-cards,.quick,.map-layout,.lce-faith-grid,
  #journal>.split,#journal .split,#legacy .grid,#caps .split,#people .grid,#mem .grid{
    grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important
  }
  .grid,.split,.stats,.home-cards,.quick{gap:10px!important}
  .card,.panel,.stat,.event,.place,.lce-entry{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  .cardbody,.panel{padding:14px!important}
  .stats{margin-bottom:14px!important}
  .stat{padding:14px!important;border-radius:16px!important}
  .stat b{font-size:28px!important}
  .actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:8px!important}
  .actions>.primary,.actions>.soft{width:100%!important;max-width:100%!important;text-align:center!important}
  .lce-toolbar{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}
  .lce-toolbar input,.lce-toolbar select{min-width:0!important;width:100%!important;max-width:100%!important}
  .lce-inline-actions{gap:6px!important}
  .lce-inline-actions button{max-width:100%!important}

  /* Every form/control must fit the viewport */
  form,.lce-form,.lce-realform,.people-complete-form{width:100%!important;max-width:100%!important;min-width:0!important}
  input,textarea,select{max-width:100%!important;min-width:0!important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select{width:100%!important;font-size:16px!important}
  textarea{resize:vertical!important}
  .lce-form .two,.people-complete-form{grid-template-columns:minmax(0,1fr)!important}
  .people-complete-form .people-full,.people-complete-section,.people-complete-photo,.people-complete-submit{grid-column:1!important}

  /* Modals and drawers */
  .lce-modalback,.people-complete-back,.sp1-modalback,.ai-v4-back,.ai-v6-back{
    padding:8px!important;align-items:flex-start!important;overflow-y:auto!important;overflow-x:hidden!important
  }
  .lce-modal,.people-complete-modal,.sp1-modal,.ai-v4-modal,.ai-v6-modal{
    width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;min-width:0!important;
    max-height:calc(100dvh - 16px)!important;margin:0 auto!important;padding:16px!important;border-radius:20px!important;overflow-y:auto!important;overflow-x:hidden!important
  }
  .lce-modalhead,.people-complete-head{gap:8px!important;align-items:flex-start!important}
  .lce-modal h2,.people-complete-modal h2{font-size:27px!important;line-height:1.05!important;overflow-wrap:anywhere!important}
  .people-complete-photo{padding:12px!important;gap:12px!important;align-items:flex-start!important}
  .people-complete-photo-preview{width:64px!important;height:64px!important;flex:0 0 64px!important;border-radius:17px!important}
  .people-complete-photo-copy{min-width:0!important;max-width:calc(100% - 76px)!important}
  .people-complete-photo-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .people-complete-photo-actions button{width:100%!important;white-space:normal!important}
  #drawer{width:100vw!important;max-width:100vw!important}
  .drawerbody{padding:14px!important}
  #viewer{height:240px!important}

  /* Canonical create actions */
  .lce-section-create-top{width:100%!important;justify-content:stretch!important;margin:0 0 12px!important;padding:0!important}
  .lce-section-create-btn{width:100%!important;max-width:100%!important;min-height:46px!important}

  /* People */
  #people .people-final-stats,#people .people-final-tools,#people .people-card-row{grid-template-columns:1fr!important;max-width:100%!important}
  #people .people-final-stat,#people .people-upcoming,#people .people-search{max-width:100%!important;min-width:0!important}
  #people [data-person],#people .card[data-person]{border-radius:20px!important}

  /* Journal */
  #journal #depth-journal-prompts.journal-prompts-v3{padding:13px!important;border-radius:17px!important;margin-bottom:12px!important;max-width:100%!important;overflow:hidden!important}
  #journal .journal-prompt-head-v3{display:block!important}
  #journal .journal-prompt-head-v3 h3{font-size:20px!important}
  #journal .journal-prompt-count-v3{display:none!important}
  #journal .journal-prompt-grid-v3{grid-template-columns:1fr!important;gap:7px!important}
  #journal .journal-prompt-v3{min-height:52px!important;width:100%!important;padding:10px 12px!important}
  #journal .journal-advanced-v3>div:last-child{grid-template-columns:1fr!important}

  /* Heritage */
  #legacy .legacy-overview-v2,#legacy .legacy-hero-v2,#legacy .legacy-grid-v2,#legacy .legacy-progress-card-v2{width:100%!important;max-width:100%!important;min-width:0!important}
  #legacy .legacy-grid-v2{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  #legacy .legacy-hero-v2{display:block!important;padding:20px 16px!important;border-radius:22px!important}
  #legacy .legacy-hero-v2 h1{font-size:clamp(31px,9.8vw,42px)!important;line-height:1.02!important;overflow-wrap:anywhere!important}
  #legacy .legacy-progress-card-v2{margin-top:14px!important;padding:14px!important}
  #legacy .legacy-card-v2{min-width:0!important;max-width:100%!important;padding:16px!important;border-radius:20px!important}

  /* AI — phone layout, without changing bubble colors */
  #ai,#ai.ai-p1{width:100%!important;max-width:100%!important;min-width:0!important;padding-inline:0!important;overflow-x:hidden!important}
  #ai .ai-p1-layout{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
  #ai .ai-p1-main,#ai .ai-p1-chatcard,#ai .ai-p1-side{position:static!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;margin:0!important}
  #ai .ai-p1-chatcard{border-radius:20px!important;overflow:hidden!important}
  #ai .ai-p1-chat{width:100%!important;max-width:100%!important;min-width:0!important;min-height:350px!important;max-height:58dvh!important;padding:14px 10px 10px!important;overflow-y:auto!important;overflow-x:hidden!important}
  #ai .ai-p1-message{max-width:100%!important;min-width:0!important}
  #ai .ai-p1-message.me .ai-p1-bubble,#ai .ai-p1-message.ai .ai-p1-bubble{max-width:91%!important;min-width:0!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  #ai .ai-p1-compose{position:static!important;width:100%!important;max-width:100%!important;padding:9px!important}
  #ai .ai-p1-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important;max-width:100%!important;gap:7px!important}
  #ai .ai-p1-input{width:100%!important;min-width:0!important;max-width:100%!important;min-height:46px!important;font-size:16px!important;padding:11px 12px!important}
  #ai .ai-p1-send{width:46px!important;min-width:46px!important;height:46px!important;padding:0!important}
  #ai .ai-p1-side{margin-top:12px!important}
  #ai .ai-p1-chathead{padding:10px 12px!important;gap:7px!important;flex-wrap:wrap!important}
  #ai .ai-p1-chathead button{max-width:100%!important}

  /* Salon */
  #tv,#tv #rt-workspace,#tv .rt4-entry,#tv .panel{max-width:100%!important;min-width:0!important}
  #tv.salon-premium-v1>.hero{min-height:0!important;padding:24px 16px!important;border-radius:22px!important}
  #tv.salon-premium-v1>.hero h1{font-size:38px!important;line-height:1!important}
  #tv .salon-hero-art{display:none!important}
  #tv.salon-premium-v1 #rt-workspace{padding:10px!important;border-radius:20px!important;overflow:hidden!important}
  #tv #rt-screen{width:100%!important;max-width:100%!important;aspect-ratio:16/9!important;height:auto!important}
  #tv .rt4-entry,#tv .split,#tv [class*="grid"]{grid-template-columns:1fr!important}
  #tv #rt-media{width:100%!important;max-width:100%!important;min-width:0!important}
  #tv #rt-media input{width:100%!important;min-width:0!important}
  #tv .rt4-providerbar{display:flex!important;max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important;scrollbar-width:none!important}
  #tv .rt4-providerbar::-webkit-scrollbar{display:none!important}
  #tv .rt4-provider{flex:0 0 auto!important}

  /* Mon univers / settings / capsules — prevent wide desktop grids */
  #moi [class*="grid"],#likes [class*="grid"],#settings [class*="grid"],#caps [class*="grid"]{grid-template-columns:1fr!important;max-width:100%!important}
  #moi [class*="shell"],#likes [class*="shell"],#settings [class*="shell"],#caps [class*="shell"]{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Long text and fixed-width leftovers */
  h1,h2,h3,p,span,label,small{max-width:100%;overflow-wrap:anywhere}
  table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important}
  pre,code{max-width:100%!important;overflow-x:auto!important;white-space:pre-wrap!important}
}

@media (max-width:480px){
  .sidebar{padding-inline:8px!important}
  #nav button{font-size:11px!important;padding:8px 10px!important}
  .page,body.lce-v10-detail main>.page.active{padding-left:8px!important;padding-right:8px!important}
  #lce-v10-journey{padding-left:8px!important;padding-right:8px!important}
  .lce-v9-hero{padding-left:11px!important;padding-right:11px!important;border-radius:20px!important}
  .lce-v9-title{font-size:clamp(29px,10.2vw,39px)!important}
  .lce-v9-desc{font-size:14px!important}
  .lce-v9-scene{height:300px!important}
  .lce-v9-scene-people,.lce-v9-scene-legacy,.lce-v9-scene-journal{height:300px!important}
  .lce-v9-scene-capsule{height:280px!important}
  .lce-modal,.people-complete-modal,.sp1-modal,.ai-v4-modal,.ai-v6-modal{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;padding:13px!important}
  #ai .ai-p1-message.me .ai-p1-bubble,#ai .ai-p1-message.ai .ai-p1-bubble{max-width:94%!important}
  #tv.salon-premium-v1>.hero h1{font-size:34px!important}
}

@media (orientation:landscape) and (max-height:500px) and (max-width:900px){
  .sidebar,body.lce-v10-browse .sidebar,body.lce-v10-detail .sidebar{position:relative!important}
  #lce-v10-detailbar{top:8px!important}
  .lce-modal,.people-complete-modal,.sp1-modal,.ai-v4-modal,.ai-v6-modal{max-height:calc(100dvh - 10px)!important}
}