/* Mobile interaction layer. Stable scene sizes, native vertical momentum. */
[data-cb=dismiss-keyboard]{display:none!important}
#hold-animation{display:none}
.mobile-carousel-hint{display:none}
.dialog-image-strip{display:none}
@media(max-width:900px){
 html{scroll-behavior:auto;scroll-padding-top:104px;overflow-anchor:none}
 :root{--panel-top:calc(108px + env(safe-area-inset-top));--panel-bottom:calc(84px + env(safe-area-inset-bottom))}
 .site-header{top:max(10px,env(safe-area-inset-top))!important}
 .board-window,.gallery-window,.byat-window,.exterior-window{touch-action:pan-y pinch-zoom}
 .photo-stage,.project-gallery .dialog-visual{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 .mobile-menu-toggle{width:auto;min-width:76px;height:44px;font-size:14px;gap:7px;padding:8px 12px;bottom:max(12px,env(safe-area-inset-bottom))!important}
 .mobile-menu-toggle span{font-size:18px}
 .mobile-sections[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;padding:12px;overscroll-behavior:contain}
 .mobile-sections>header{position:static;flex:none;background:var(--brand-plum);z-index:2;padding:4px 8px 12px}
 .mobile-sections nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--brand-primary) transparent;padding-right:4px}
 .mobile-sections>header button{min-width:44px;min-height:44px}
 .mobile-sections nav a{min-height:48px;font-size:16px;transition:background-color .15s,color .15s,box-shadow .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 .mobile-sections nav a:hover{background:color-mix(in srgb,var(--brand-white) 18%,transparent);color:var(--brand-white)}
 .mobile-sections nav a:focus-visible{outline:2px solid var(--brand-primary);outline-offset:-2px}
 .mobile-sections nav a:active{background:var(--brand-primary);color:var(--brand-plum);box-shadow:inset 0 0 0 2px var(--brand-primary);transition:none}
 #chatbot-dock[data-mode=compact]:not(.in-hero){width:min(180px,calc(100vw - 206px))}
 #chatbot-dock[data-mode=popup]{bottom:calc(68px + env(safe-area-inset-bottom))!important}
 #chatbot-dock[data-mode=popup] #chatbot-panel{max-height:calc(100dvh - 172px - env(safe-area-inset-bottom));overflow:hidden}
 #chatbot-dock[data-mode=compact] #chatbot-input{font-size:16px!important;min-height:44px;padding:10px 12px!important;text-overflow:ellipsis}
 #chatbot-panel #chatbot-input{font-size:16px!important;min-height:44px}
 #chatbot-panel #chatbot-form button{min-width:44px;min-height:44px}
 #chatbot-panel .chatbot-tools button{min-width:44px;min-height:44px}
 #chatbot-section #chatbot-panel .chatbot-header strong{font-size:clamp(20px,5.6vw,28px);line-height:1.12}
 #chatbot-section-slot{height:100svh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 #chatbot-section #chatbot-panel{height:100%;min-height:0}
 #chatbot-section #chatbot-messages{overscroll-behavior-y:auto}
 #chatbot-panel .chatbot-message p{font-size:16px!important;line-height:1.55!important}
 #chatbot-panel .chatbot-actions button{font-size:14px;min-height:44px}
 #chatbot-panel .chatbot-footer button{font-size:12px!important;min-height:32px}
 #chatbot-section .has-media #chatbot-media{flex-basis:min(30svh,240px);height:min(30svh,240px)}
 #page-scroll-indicator{display:none!important}
 #skip-animation{right:calc(var(--page-margin) + 88px)!important;min-width:44px;min-height:44px;max-width:none!important}
 #hold-animation:not([hidden]){display:block;position:fixed;z-index:46;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);border:var(--brand-border-width) solid var(--brand-border);border-radius:24px;padding:10px 18px;min-height:44px;background:var(--brand-plum);color:var(--brand-white);font:500 14px var(--brand-font);white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 #hold-animation.is-playing{background:var(--brand-primary);color:var(--brand-plum)}
 .photo-dots button{position:relative;min-width:32px;min-height:36px;background:transparent!important;border:0!important;border-radius:0}
 .photo-dots button:before{display:none!important}
 .photo-dots button:after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35;left:50%;top:50%;transform:translate(-50%,-50%)}
 .photo-dots button[aria-pressed=true]:after{opacity:1;background:var(--brand-primary)}
 .photo-arrow{display:grid!important;place-items:center;min-width:44px;min-height:44px;opacity:1!important}
 .byat-panel .byat-copy{overflow-y:auto!important;overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:var(--brand-primary) transparent;scroll-padding:var(--ds-box-spacing-mobile-5);padding-right:8px}
 .project-intro,.project-outro{overscroll-behavior-y:auto}
 .byat-copy p{font-size:var(--ds-body-size-mobile-3)!important;line-height:var(--ds-body-line-mobile-1)!important;}
 .byat-copy .render-kicker{font-size:var(--ds-caption-size-mobile-1)!important;}
 #approccio .approach-pin{position:relative;top:auto;min-height:0;padding-bottom:110px}
 #chatbot-section{min-height:100svh}
 .project-gallery .dialog-copy p{font-size:16px;line-height:1.55}
 .project-gallery .dialog-copy{scrollbar-gutter:stable}
 .project-gallery .dialog-arrow{width:44px;height:44px}
 .project-gallery .dialog-visual>.dialog-image{display:none}
 .project-gallery .dialog-image-strip{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-y pinch-zoom;overscroll-behavior:contain;scroll-snap-type:none}
 .dialog-image-strip::-webkit-scrollbar{display:none}
 .project-gallery .dialog-image-strip>img{display:block;flex:0 0 100%;width:100%;height:100%;min-width:0;object-fit:contain}
 .contact-dialog input,.contact-dialog textarea,.contact-dialog select{font-size:16px!important}
}
@media(max-width:600px){
 .contact{height:auto!important}
 .contact .contact-pin{position:relative;top:auto;height:auto;min-height:100svh;overflow:visible;gap:24px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
 .contact .contact-copy{overflow:visible;flex:none}
 .contact .contact-copy>h2{position:static;font-size:28px;margin-bottom:18px}
 .contact .contact-paths{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;max-height:none;gap:var(--ds-box-spacing-mobile-6);}
 .contact .contact-path{min-height:190px;padding:var(--ds-box-spacing-mobile-7);gap:var(--ds-box-spacing-mobile-8);}
 .contact .contact-path h3{font-size:var(--ds-heading-size-mobile-5);line-height:var(--ds-heading-line-mobile-1);}
 .contact .contact-path h3 br{display:initial}
 .contact .contact-path>p:not(.eyebrow){display:block;font-size:var(--ds-caption-size-mobile-2);line-height:var(--ds-caption-line-mobile-1);}
 .contact .contact-paths .eyebrow{font-size:var(--ds-caption-size-mobile-3);}
 .contact .contact-paths .contact-cta{font-size:14px;min-height:44px;align-items:center}
 .contact footer{font-size:12px;line-height:1.45;gap:10px}
 .contact footer>a[href^='mailto:']{font-size:14px;min-height:44px;display:flex;align-items:center}
 .contact footer>span:nth-last-child(2){position:static;font-size:12px}
}
/* Writing mode uses VisualViewport dimensions rather than guessing keyboard size. */
@media(max-width:900px){
 html.chat-writing #chat-writing-layer{position:fixed;inset:0;z-index:200;pointer-events:none}
 html.chat-writing #chat-writing-layer #chatbot-panel{pointer-events:auto}
 html.chat-writing #chatbot-panel{position:fixed!important;inset:auto!important;top:var(--chat-visible-top,0px)!important;left:var(--chat-visible-left,0px)!important;width:var(--chat-visible-width,100vw)!important;height:var(--chat-visible-height,100dvh)!important;max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;transform:none!important;border-radius:0!important;z-index:200;display:flex!important;flex-direction:column;box-sizing:border-box;background:var(--brand-plum)!important;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
 html.chat-writing #chatbot-panel .chatbot-header{display:flex!important;flex:none;padding:6px 12px;min-height:54px}
 html.chat-writing #chatbot-panel .chatbot-header strong{font-size:20px!important;color:var(--brand-white)}
 html.chat-writing #chatbot-panel .chatbot-tools>[data-cb]{display:none!important}
 html.chat-writing #chatbot-panel .chatbot-tools>[data-cb=dismiss-keyboard]{display:block!important;font-size:14px}
 html.chat-writing #chatbot-panel .chatbot-body{flex:1;min-height:0;overflow:hidden;padding:0!important}
 html.chat-writing #chatbot-panel #chatbot-messages{max-height:none!important;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px!important;box-sizing:border-box}
 html.chat-writing #chatbot-panel #chatbot-media,html.chat-writing #chatbot-panel .chatbot-footer{display:none!important}
 html.chat-writing #chatbot-panel #chatbot-form{flex:none;padding:8px 12px max(8px,env(safe-area-inset-bottom));margin:0;border-top:var(--brand-border-width) solid var(--brand-border)}
 html.chat-keyboard-open #chatbot-panel #chatbot-form{padding-bottom:8px}
 html.chat-writing :is(.site-header,.mobile-menu-toggle,#hold-animation,#skip-animation){visibility:hidden!important}
}
@media(max-width:360px){
 .byat-panel .byat-copy h2{font-size:var(--ds-heading-size-mobile-6)!important;line-height:var(--ds-heading-line-mobile-2)!important;}
 .project-gallery[open]{grid-template-rows:auto minmax(100px,28svh) auto minmax(80px,1fr)}
 .project-gallery #gallery-title{font-size:23px}
}
@media(max-width:900px) and (max-height:500px){
 #chatbot-section-slot{padding-top:100px;padding-bottom:64px}
 #chatbot-section .chatbot-footer{display:none}
}
@media(max-width:900px){
 :is(#citta,#arredi,#palazzo-butera){--panel-bottom:calc(120px + env(safe-area-inset-bottom))}
 :is(#citta .board-window,#arredi .gallery-window,#palazzo-butera .butera-window){overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:none;overscroll-behavior-x:contain}
 :is(#citta .board-window,#arredi .gallery-window,#palazzo-butera .butera-window)::-webkit-scrollbar{display:none}
 .mobile-carousel-hint{display:flex;position:absolute;z-index:20;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);align-items:center;gap:12px;width:max-content;max-width:90vw;pointer-events:none;color:var(--brand-white);font:500 13px var(--brand-font);opacity:0;transition:opacity .3s}
 .mobile-carousel-hint.is-visible{opacity:1}
 .mobile-carousel-hint small{display:block;font-size:11px;opacity:.75;margin-top:3px}
 .swipe-cue{font-size:30px}
 #hold-animation:not([hidden]){display:flex;flex-direction:row;align-items:center;gap:8px;top:auto;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);padding:8px 13px;border-radius:24px;background:rgba(35,18,34,.86);white-space:nowrap;width:max-content;max-width:calc(100vw - 32px);font-size:12px;text-align:center;box-shadow:0 4px 18px #0002}
 #hold-animation svg{flex:none;width:28px;height:28px;animation:hold-invite 2s ease-in-out infinite}
 #hold-animation.is-playing{opacity:.35;color:var(--brand-white)}
 #hold-animation.is-playing svg{animation:none}
 .hold-scene-active :is(#mondo,#casa){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
@keyframes hold-invite{50%{opacity:.55;transform:scale(.94)}}
@media(max-width:700px){
 #palazzo-butera .butera-panel{grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px}
 #palazzo-butera .byat-copy{height:100%;min-height:0}
}
@media(max-width:900px){
 #palazzo-butera .photo-stage{flex:1;min-height:0;height:auto;max-height:none;aspect-ratio:auto}
 #palazzo-butera .photo-dots{flex:none}
}
@media(max-width:900px) and (max-height:500px){
 :is(#citta,#arredi,#palazzo-butera){--panel-bottom:84px}
 .mobile-carousel-hint{bottom:64px;font-size:11px;gap:6px}
 .mobile-carousel-hint small{display:none}
 .swipe-cue{font-size:20px}
}
@media(prefers-reduced-motion:reduce){#hold-animation svg{animation:none}.mobile-carousel-hint{transition:none}}