/* Append after mobile-final-design, notice-desktop-r53 and the R60 styles.
   Keep the existing footer DOM and links. No call-state or provider changes. */
#app {
  --rosi-footer-reserve:56px;
  --rosi-header-reserve:72px;
  --rosi-notice-reserve:0px;
  padding-bottom:var(--rosi-footer-reserve);
}
#app>footer,
#app[data-call-active="true"]>footer,
#app[data-call-active="true"]:has(.conversation:not(.chat-collapsed) .invite-card)>footer {
  display:block!important;
  position:fixed;
  inset:auto 0 0;
  width:auto;
  height:auto;
  margin:0 clamp(24px,4vw,72px);
  padding:4px 0 max(4px,env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:#fff;
  z-index:8;
  pointer-events:auto;
}
#app>footer .footer-main {flex-wrap:wrap;row-gap:0}
#app>footer .footer-links {flex-wrap:wrap;justify-content:center}
#app>footer .footer-credit {white-space:normal}
#app .conversation,
#app .conversation.chat-collapsed,
#app[data-call-active="true"]:has(.conversation:not(.chat-collapsed) .invite-card) .conversation,
#app[data-call-active="true"]:has(>.mobile-invite) .conversation {
  height:calc(100svh - var(--rosi-header-reserve) - var(--rosi-footer-reserve) - var(--rosi-notice-reserve));
  height:calc(100dvh - var(--rosi-header-reserve) - var(--rosi-footer-reserve) - var(--rosi-notice-reserve));
  min-height:240px;
}
/* The older notice rule made #app a three-row grid and excluded the footer.
   Normal flow plus measured notice height keeps the same control reservation. */
#app[data-call-active="true"]:has(>.mobile-invite) {display:block;height:auto}
#app[data-call-active="true"]:has(>.mobile-invite) .conversation {min-height:180px}
@media(max-width:767px),(max-width:1024px) and (pointer:coarse) {
  #app {--rosi-footer-reserve:calc(78px + env(safe-area-inset-bottom))}
  #app>footer,
  #app[data-call-active="true"]>footer {
    margin:0 24px;
    padding:4px 0 max(4px,env(safe-area-inset-bottom));
  }
  #app>footer .footer-credit {align-items:center}
  #app .controls,
  #app .controls.active,
  #app[data-call-active="true"] .controls.active,
  #app .controls.active:has(#call-whatsapp:not([hidden])) {
    /* The fixed footer now owns the device safe area. */
    padding-bottom:12px;
  }
}