/* ============================================================================
   The call screen on a SHORT or NARROW screen (a phone held upright, or held sideways).
   Loaded when the screen is up to 720px wide OR up to 520px tall.
   It fills the screen like a calling app, and the buttons are always on screen.
   ============================================================================ */
/* ============================================================================
   Capzul on a phone: screens up to 720px wide. Loaded after styles.css, so it wins.
   Rules of this file: every tap target is at least 44px, text is never under 12px,
   nothing needs sideways scrolling, and the things you need most are never off the screen.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. The call
   It fills the screen like a calling app: your friend large in the middle, you as a small row,
   every button pinned to the bottom. Opening chat or a game shrinks the faces to make room
   instead of pushing the buttons off the screen. */
.screen[data-screen="call"]{position:fixed;top:0;left:0;right:0;height:var(--vvh,100%);z-index:12;width:auto;max-width:none;animation:none;
  padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--canvas)}
.screen[data-screen="call"]:not([hidden]){display:flex}
.screen[data-screen="call"] .card.call{flex:1;min-height:0;width:100%;margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:24px}
.card.call .call-top{order:1;flex:none;padding:10px 14px;gap:6px 8px;font-size:.8rem}
.card.call .call-top>span:first-child{flex:1 1 100%}
.card.call .fpill{padding:3px 10px;font-size:.8rem}
.card.call .grace{order:2;flex:none;padding:8px 14px;font-size:.84rem}
.card.call .voices{order:3;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px 14px}
.card.call #vThem{order:1;flex:1 1 auto;min-height:0;justify-content:center;gap:6px;padding:12px}
.card.call #vThem .face{width:min(36vw,132px)}
.card.call .voice h3{font-size:1.1rem}
.card.call #vThem .wave{height:44px}
.card.call #vYou{order:2;flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:8px 14px;border-radius:18px}
.card.call #vYou .face{width:44px;flex:none}
.card.call #vYou h3{font-size:.95rem;flex:none}
.card.call #vYou .wave{flex:1;height:26px;justify-content:center}
.card.call #vYou small{display:none}
.card.call .prompt{order:4;flex:none;margin:0 14px 10px;padding:8px 12px;font-size:.86rem;border-radius:16px}
.card.call #promptText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.call .prompt button{min-height:44px;padding:6px 14px}
.card.call .games{order:5;margin:0 14px 10px;flex:1 1 auto;min-height:0;overflow:auto}
.card.call .chat{order:6;margin:0 14px 10px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:10px;gap:8px}
.card.call .chat .msgs{flex:1;max-height:none;min-height:0}
.card.call .chat .hint{display:none}
.card.call .composer input{font-size:16px;min-height:48px}
.card.call #hearHint{order:7;flex:none;margin:0;padding:0 14px 8px;font-size:.8rem}
.card.call .call-uncomf{order:8;flex:none;margin:0 0 8px}
.card.call .call-uncomf .btn{min-height:44px}
.card.call #callFoot{display:none}
.card.call .controls{order:9;flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;justify-items:center;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--line);background:var(--card)}
.card.call .controls .round{width:52px;height:52px}
.card.call #muteBtn{grid-column:1;grid-row:1}
.card.call #chatBtn{grid-column:2;grid-row:1}
.card.call #friendBtn{grid-column:3;grid-row:1}
.card.call #gameBtn{grid-column:4;grid-row:1}
.card.call #reportBtn{grid-column:5;grid-row:1}
.card.call #endBtn{grid-column:1/3;grid-row:2;width:100%;min-height:52px;font-size:1rem}
.card.call #nextBtn{grid-column:3/6;grid-row:2;width:100%;min-height:52px;font-size:1rem}
/* chat or a game is open: the two voices become one row, and the open panel takes the room */
.card.call.chat-open .voices,.card.call.games-open .voices{flex:none;flex-direction:row;gap:8px;padding:8px 14px}
.card.call.chat-open .voice,.card.call.games-open .voice{flex:1 1 0;min-width:0;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:6px 10px;border-radius:16px;transform:none}
.card.call.chat-open .voice .face,.card.call.games-open .voice .face{width:38px;flex:none}
.card.call.chat-open .voice h3,.card.call.games-open .voice h3{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.card.call.chat-open .voice .wave,.card.call.games-open .voice .wave{display:none}
.card.call.chat-open .voice small,.card.call.games-open .voice small{display:none}
.card.call.chat-open .prompt,.card.call.games-open .prompt{display:none}
/* a short phone: give the call every spare pixel */
@media (max-height:700px){
  .card.call .call-top>span:first-child{display:none}
  .card.call #vThem .face{width:min(28vw,92px)}
  .card.call #vThem .wave{height:34px}
  .card.call .prompt{margin-bottom:6px}
  .card.call .controls{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .card.call .controls .round{width:48px;height:48px}
}
.card.call .wave{overflow:hidden;min-width:0}
.card.call .games .btn,.card.call .g-head .btn{min-height:44px}
/* polish: the faces really do shrink when chat or a game is open, the header stays on one or two lines, the game tabs fit */
.card.call.chat-open #vThem .face,.card.call.games-open #vThem .face,.card.call.chat-open #vYou .face,.card.call.games-open #vYou .face{width:38px}
.card.call.chat-open #vThem,.card.call.games-open #vThem,.card.call.chat-open #vYou,.card.call.games-open #vYou{flex:1 1 0;padding:6px 10px;gap:8px}
.card.call .call-top{padding:8px 12px;gap:4px 6px}
.card.call .call-top>span:first-child{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.call .fpill{padding:3px 8px;font-size:.74rem}
.card.call .g-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.card.call .g-head .tabs{min-width:0}
.card.call .g-head .tab{white-space:nowrap;font-size:.8rem;padding:8px 6px}
.card.call .call-top>span:first-child,.card.call .fpill{font-size:.75rem}
/* ---- held sideways (or any short screen): one compact row of controls, the two voices side by side ---- */
@media (max-height:520px){
  .screen[data-screen="call"]{padding:calc(6px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}
  .card.call{border-radius:20px}
  .card.call .call-top>span:first-child{display:none}
  .card.call .call-top{padding:6px 12px;justify-content:flex-end}
  .card.call .voices{flex:1 1 auto;flex-direction:row;align-items:stretch;gap:10px;padding:8px 12px}
  .card.call #vThem,.card.call #vYou{order:0;flex:1 1 0;min-width:0;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:8px 14px;border-radius:18px}
  .card.call #vThem{order:1}
  .card.call #vYou{order:2}
  .card.call #vThem .face,.card.call #vYou .face{width:56px;flex:none}
  .card.call #vThem h3,.card.call #vYou h3{font-size:.95rem;flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card.call #vThem .wave,.card.call #vYou .wave{flex:1;height:30px;justify-content:center}
  .card.call .voice small{display:none}
  .card.call .prompt{margin:0 12px 6px;padding:6px 12px}
  .card.call .call-uncomf{margin:0 0 6px}
  .card.call .controls{grid-template-columns:minmax(0,1.3fr) repeat(5,52px) minmax(0,1.3fr);align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .card.call .controls .round{width:52px;height:52px}
  .card.call #endBtn{grid-column:1;grid-row:1}
  .card.call #muteBtn{grid-column:2;grid-row:1}
  .card.call #chatBtn{grid-column:3;grid-row:1}
  .card.call #friendBtn{grid-column:4;grid-row:1}
  .card.call #gameBtn{grid-column:5;grid-row:1}
  .card.call #reportBtn{grid-column:6;grid-row:1}
  .card.call #nextBtn{grid-column:7;grid-row:1}
  .card.call #endBtn,.card.call #nextBtn{min-height:52px}
  .card.call.chat-open .voices,.card.call.games-open .voices{flex:none;padding:6px 12px}
  .card.call.chat-open #vThem .face,.card.call.games-open #vThem .face,.card.call.chat-open #vYou .face,.card.call.games-open #vYou .face{width:36px}
  .card.call.chat-open .chat,.card.call.games-open .games{min-height:90px}
}

/* ---- short screens, part 2: nothing is allowed to push the buttons out of the card ---- */
@media (max-height:520px){
  .screen[data-screen="call"] .card.call{padding:0}
  .card.call .call-top{min-height:46px;align-items:center}
  .card.call .call-uncomf{position:absolute;top:1px;left:10px;margin:0;z-index:2}    /* the safety button sits in the empty left of the header row instead of taking its own row */
  .card.call .call-uncomf .btn{min-height:44px}
  .card.call .prompt{padding:4px 12px}
  .card.call.chat-open .voices,.card.call.games-open .voices{padding:4px 12px}
  .card.call.chat-open #vThem,.card.call.games-open #vThem,.card.call.chat-open #vYou,.card.call.games-open #vYou{padding:2px 10px}
  .card.call.chat-open #vThem .face,.card.call.games-open #vThem .face,.card.call.chat-open #vYou .face,.card.call.games-open #vYou .face{width:28px}
  .card.call.chat-open .chat,.card.call.games-open .games{min-height:0;margin-bottom:6px}
  .card.call .chat{padding:8px}
}

/* the small avatar beside the name (chat or a game open) is always a circle: its height comes from its width (a square), and the row never stretches it
   (on a phone held sideways it was 28px wide and 74px tall) */
.card.call.chat-open #vThem .face,.card.call.games-open #vThem .face,.card.call.chat-open #vYou .face,.card.call.games-open #vYou .face{align-self:center;height:auto;min-height:0;aspect-ratio:1 / 1;overflow:hidden}
@media (max-height:520px){
  .card.call.chat-open .voice .face,.card.call.games-open .voice .face{font-size:1.1rem;line-height:1}      /* the emoji fits inside the small tile instead of spilling over the name or being clipped (a phone held sideways has no artwork, only the emoji) */
}