html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Messages remain native selectable text, including iOS long-press Copy. */
:is(#chat-messages,#room-private-messages,#private-messages) :is(.chat-message,.private-message) p,
:is(#chat-messages,#room-private-messages,#private-messages) :is(.chat-message,.private-message) p * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

main {
  height: 100%;
  min-height: 100%;
}
#scene-art{position:absolute;inset:0;transform:scale(var(--scene-zoom,1));transform-origin:50% 51%;pointer-events:none}
#scene-zoom-controls{display:none}
@media(max-width:600px){
 /* Unlike hidden, clip cannot be scrolled by focus reveal on a zoomed Peep.
    Only artwork gets the stable camera dimensions; UI stays in viewport space. */
 #scene{overflow:clip}
 #scene-art{inset:0 auto auto 0;width:var(--scene-width,100%);height:var(--scene-height,100%)}
 #scene-art :is(.place,#store-building){--stage-max:calc(var(--scene-height,100vh) * .9)}
 #scene-zoom-controls{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(14px,calc(env(safe-area-inset-bottom) + 12px));z-index:6;display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--paper-line);border-radius:24px;background:var(--paper);color:var(--paper-ink);box-shadow:0 4px 14px #13293824}
 #scene-zoom-controls button{position:static;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;opacity:1;backdrop-filter:none;touch-action:manipulation}
 #scene-zoom-controls button:disabled{opacity:.35;cursor:default}
 #scene-zoom-controls output{min-width:36px;text-align:center;font:500 12px 'Alegreya Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
 html:has(dialog[open]) #scene-zoom-controls,html:has(#drawer.open) #scene-zoom-controls,html:has(#store-panel:not([hidden])) #scene-zoom-controls,html.controls-hidden #scene-zoom-controls{visibility:hidden;pointer-events:none}
}

/* iOS can expose a strip below the dynamic viewport in Safari and standalone.
   Carry the same artwork through that strip in both modes. */
@media (max-width: 600px) {
  html[data-time="day"],
  html[data-time="day"] body {
    background: #d9e4d2 url('/assets/forest-day-v4.webp') center bottom / cover no-repeat;
  }
  html[data-time="night"],
  html[data-time="night"] body {
    background: #172e3e url('/assets/forest-night-v4.webp') center bottom / cover no-repeat;
  }
  html, body, #scene { height: 100%; min-height: 100%; }
  html.pwa-mode, html.pwa-mode body, html.pwa-mode #scene { height: 100dvh; min-height: 100dvh; }
}

/* Keep the primary seat action readable above the dev-only Live bar. */
#seat-actions { bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px)); }
#join-tambay { background: #f5f2e9ee; color: #344239; border-color: #34423940; box-shadow: 0 8px 24px #172e3e26; }
#join-tambay:disabled { opacity: .92; }

@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Lantay surface hierarchy: map and store are centered canvases; live tools stay side panels. */
dialog#chat-panel,
dialog#music-panel,
dialog#notifications-panel,
dialog#admin-panel {
  inset: 0 0 0 auto;
  width: min(460px, 100%);
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 22px 0 0 22px;
  transform: translateX(110%);
  transition: transform .28s ease;
  overflow: auto;
}

dialog#chat-panel[open],
dialog#music-panel[open],
dialog#notifications-panel[open],
dialog#admin-panel[open] {
  transform: translateX(0);
}

dialog#chat-panel > header,
dialog#music-panel > header,
dialog#notifications-panel > header,
dialog#admin-panel > header {
  padding-top: max(18px, env(safe-area-inset-top));
}

@media (max-width: 600px) {
  dialog#chat-panel,
  dialog#music-panel,
  dialog#notifications-panel,
  dialog#admin-panel {
    width: 100%;
    border-radius: 18px 0 0 18px;
  }
}

/* Fallback for standalone launches before pwa.js finishes initializing. */
@media (max-width: 600px) and (display-mode: standalone),
       (max-width: 600px) and (display-mode: fullscreen),
       (max-width: 600px) and (display-mode: minimal-ui) {
  dialog#chat-panel {
    inset: auto 0 0;
    width: 100%;
    height: 55dvh;
    max-height: 55dvh;
    border-radius: 22px 22px 0 0;
    transform: none;
  }

  dialog#chat-panel[open] {
    transform: none;
  }
}

/* Installed PWA: keep the same centered canvas treatment as the store and map. */
html.pwa-mode dialog#chat-panel,
html.pwa-mode dialog#music-panel,
html.pwa-mode dialog#notifications-panel,
html.pwa-mode dialog#admin-panel {
  inset: 50% auto auto 50%;
  width: min(430px, calc(100% - 32px));
  height: auto;
  max-height: calc(100dvh - 32px);
  margin: 0;
  border-radius: 22px;
  transform: translate(-50%, -50%);
  transition: none;
}

html.pwa-mode dialog#chat-panel[open],
html.pwa-mode dialog#music-panel[open],
html.pwa-mode dialog#notifications-panel[open],
html.pwa-mode dialog#admin-panel[open] {
  transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
  html.pwa-mode dialog#chat-panel,
  html.pwa-mode dialog#music-panel,
  html.pwa-mode dialog#notifications-panel,
  html.pwa-mode dialog#admin-panel {
    width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 22px;
  }

  /* Chat is a lower-half sheet in the installed mobile app so the lantay
     remains visible while people read and send messages. */
  html.pwa-mode dialog#chat-panel {
    inset: auto 0 0;
    width: 100%;
    height: 55dvh;
    max-height: 55dvh;
    border-radius: 22px 22px 0 0;
    transform: none;
  }

  html.pwa-mode dialog#chat-panel[open] {
    transform: none;
  }

  html.pwa-mode dialog#chat-panel > header {
    padding-top: 18px;
  }
}

/* Mobile chat lives above the scene. This is UI space, independent of scene zoom. */
@media(max-width:600px){
 html:root dialog#chat-panel,html.pwa-mode:root dialog#chat-panel[open]{
  inset:var(--chat-viewport-top,0px) 0 auto;width:100%;margin:0;
  height:min(34svh,var(--chat-viewport-height,100dvh));max-height:min(34svh,var(--chat-viewport-height,100dvh));
  padding:0;border-radius:0 0 22px 22px;transform:none;transition:none;overflow:hidden;
 }
 html:root dialog#chat-panel>header{flex:none;align-items:center;padding:max(8px,env(safe-area-inset-top)) 16px 6px;gap:8px}
 html:root dialog#chat-panel>header::before{display:none}
 html:root dialog#chat-panel>header h1{font-size:22px;line-height:1.1}
 html:root dialog#chat-panel>header p{font-size:11px;margin:0}
 html:root dialog#chat-panel .chat-panel-body{display:flex;flex-direction:column;gap:5px;min-height:0;padding:6px 14px 10px;overflow:hidden}
 html:root dialog#chat-panel .chat-mode-tabs{flex:none;position:static;padding:0 0 5px;margin:0}
 html:root dialog#chat-panel #chat-conversation{min-height:36px;padding-top:5px;padding-bottom:5px;font-size:16px}
 html:root dialog#chat-panel :is(#group-chat-section,#room-private-section):not([hidden]){display:flex;flex:1;flex-direction:column;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
 html:root dialog#chat-panel :is(.chat-heading-row h2,#chat-identity,#room-private-section>h2,.private-chat-intro,.chat-updated){display:none}
 html:root dialog#chat-panel :is(#chat-messages,#room-private-messages){flex:1;min-height:28px;max-height:none;margin:0;padding:6px 8px;overflow-y:auto;overscroll-behavior:contain}
 html:root dialog#chat-panel .chat-message{padding:5px 0;margin:0;font-size:14px}
 html:root dialog#chat-panel .chat-message p{margin:2px 0}
 html:root dialog#chat-panel :is(#chat-form,#room-private-form){flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin:5px 0 0;padding:0;align-items:end}
 html:root dialog#chat-panel form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 html:root dialog#chat-panel form textarea{min-height:44px;height:44px;max-height:70px;margin:0;padding:9px 10px;font-size:16px;resize:none}
 html:root dialog#chat-panel form button{min-height:44px;margin:0;padding:8px 12px}
 html:root dialog#chat-panel :is(#chat-status,#room-private-status){flex:none;margin:2px 0 0;font-size:12px}
 html:root dialog#chat-panel :is(#chat-status,#room-private-status):empty{display:none}
 html:root dialog#chat-panel .private-consent{flex:none;margin:3px 0;padding:5px 8px;font-size:12px}
 html:root dialog#chat-panel .chat-scroll-cue{display:none}
 html:root dialog#chat-panel::backdrop{background:transparent;backdrop-filter:none}
}

@media(max-width:600px){
 html:root dialog#chat-panel .voice-wrap{display:none}
 html:root dialog#chat-panel .chat-heading-row{display:contents}
 html:root dialog#chat-panel .chat-chime-toggle{position:absolute;inset:auto;width:auto;height:28px;top:calc(max(8px,env(safe-area-inset-top)) + 4px);right:96px;min-height:28px;padding:3px 8px;font-size:11px}
 html:root dialog#chat-panel .private-chat-status{flex:none}
}

@media(max-width:600px){html:root dialog#chat-panel .chat-typing{grid-column:1 / -1;grid-row:2;min-height:12px;margin:0;font-size:11px}html:root dialog#chat-panel>header{padding-right:170px}html:root dialog#chat-panel .chat-header-actions{position:absolute;right:14px;top:max(8px,env(safe-area-inset-top))}}

/* Approved mobile composition: title, conversation picker, settings/close in one header. */
@media(max-width:600px){
 html:root dialog#chat-panel>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,130px) auto;align-items:center;padding:max(8px,env(safe-area-inset-top)) 14px 8px;gap:8px}
 html:root dialog#chat-panel .chat-header-copy h1{font-size:clamp(18px,4.8vw,22px);white-space:nowrap}
 html:root dialog#chat-panel .chat-header-copy p{max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 html:root dialog#chat-panel .chat-header-actions{position:static;gap:6px}
 html:root dialog#chat-panel>header #chat-conversation{width:100%;min-width:0;padding-left:8px;padding-right:25px;font-size:14px}
 html:root dialog#chat-panel .chat-heading-row{display:flex;justify-content:space-between;align-items:center;flex-direction:row-reverse;min-height:26px;margin:0 0 4px}
 html:root dialog#chat-panel .chat-chime-toggle{position:static;inset:auto;width:auto;height:26px;min-height:26px;padding:3px 8px;font-size:11px}
 html:root dialog#chat-panel .chat-updated{display:inline;flex-basis:auto;font-size:10px}
}