/* The world on a phone (2026-09-27). A moderator, from the Grand Concert Hall
   on a 360 px phone: the windows "cover everything else, especially the
   concert hall", a minimised one "also conceals the chat field", and some
   "aren't there when needed".

   Every panel of the world is pinned to an edge on its own and nothing
   decided between them on a small screen. Measured at 360 by 720 with a
   pianist on stage: with nothing folded 15% of the hall could be tapped and
   the rail was 1,218 px tall with no scroll; with everything folded the voice
   pill lay on the chat field; with the voice panel collapsed no part of the
   hall could be tapped at all.

   These are repairs, not a new layout. Loaded last, so it outranks the
   sheets it mends (voice.css, vienna.css, town.css, concert-hall.css).

   body.vienna-on  the world's screen is showing        (vienna.js)
   --vw-foot       the height of what stands at the foot of the screen: the
                   chat, or the grand's keys when you are seated  (vienna.js)
   body.chat-typing the chat field has the phone's keyboard  (social.js) */

/* 1. THE VOICE PILL stands ABOVE whatever is at the foot of the screen, at
      the left, without the room's name: on the chat row it covered the chat
      field but for its first 20 px, the unread badge and the chat's own fold;
      at the grand it covered the octave and pedal buttons. */
@media (max-width: 900px) {
  body.vienna-on .voice-pill { right: auto; left: 10px; bottom: calc(var(--vw-foot, 56px) + 8px); max-width: calc(100vw - 84px); }
  body.vienna-on .voice-pill .vp-main small { display: none; }
  body.vienna-on .voice-pill .vp-btn, body.vienna-on .voice-pill .vc-gear, body.vienna-on .voice-pill .vp-main { min-height: 36px; }
}

/* 2. THE COLLAPSED VOICE BAR lets the hall through. The panel is a layer
      over the whole screen so that a tap outside the card closes it; collapsed
      there is no card to close, only a bar, and the layer was still taking
      every tap. The bar stands above the foot too, clear of the zoom column. */
.voice-panel.card-shut { pointer-events: none; }
.voice-panel.card-shut .vc-card { pointer-events: auto; }
@media (max-width: 900px) {
  body.vienna-on .voice-panel .vc-card.shut { left: 10px; right: 74px; width: auto; bottom: calc(var(--vw-foot, 56px) + 8px); }
}

/* 3. THE RAIL scrolls inside the screen it is on (it was 1,218 px of a 720 px
      screen, its last two blocks below the bottom edge with no way to reach
      them). The blocks start folded on a phone and one opens at a time
      (fold.js). */
@media (max-width: 720px) {
  #vienna-rail { max-height: calc(100vh - 54px - var(--vw-foot, 56px) - 12px); max-height: calc(100dvh - 54px - var(--vw-foot, 56px) - 12px);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  #vienna-rail::-webkit-scrollbar { display: none; }
}

/* 4. THE CHAT LOG has a ground of its own. On a wide screen it fades into the
      plate; on a phone the plate's signs and name labels showed through it
      and the lines could not be read. */
@media (max-width: 720px) {
  #vienna-screen .vc-log { background: rgba(8, 8, 18, .92); text-shadow: none; padding-top: 10px; border-radius: 10px 10px 0 0;
    -webkit-mask-image: none; mask-image: none; }
}

/* 5. WHILE SHE TYPES the phone's keyboard has half the screen. What is left
      belongs to the chat: the pill, the zoom column, the invitation to listen
      and the plate's signs step aside until the field is left. */
body.chat-typing .voice-pill,
body.chat-typing .voice-panel.card-shut .vc-card,
body.chat-typing #vienna-screen .tw-ctl,
body.chat-typing #vienna-screen .tw-listen,
body.chat-typing #vienna-screen .tw-hslabel,
body.chat-typing #vienna-rail,
body.chat-typing #vienna-side-tab,
body.chat-typing #vienna-screen .vh-concert.shut { visibility: hidden; pointer-events: none; }
body.chat-typing #vienna-chat { width: 100%; }
body.chat-typing #vienna-screen .vc-log { max-height: 40vh; max-height: 40dvh; }