/* Small-screen layout and keyboard-safe dialogs for the Master mobile PWA. */
@media (max-width: 679px) {
  html, body {max-width:100%;overflow-x:hidden}
  .app {width:100%;max-width:100%;min-width:0}
  .top,.hero,.push-panel,.mass-push-card,.inbox-section,.access {min-width:0}
  .brand,.brand>div,.item>div,.push-panel>div,.mass-push-description>div {min-width:0}
  .brand strong,.item strong,.item p {overflow-wrap:anywhere}
  .operator-form input,.detail-section textarea,.detail-section select,
  .mass-push-form input,.mass-push-form textarea,.mass-push-form select {
    font-size:16px; /* Avoid Safari focus auto-zoom and side clipping. */
    min-width:0;
    max-width:100%;
  }
  .detail-section textarea,.mass-push-form textarea {
    width:100%;
    box-sizing:border-box;
    line-height:1.45;
    resize:vertical;
  }
  .operator-form input {min-height:44px}
  .detail-section label,.mass-push-form label {min-width:0}
  .detail-section .action,.mass-push-actions button {min-height:44px}
  #replyCitizen {display:grid;gap:12px;min-width:0}
  #replyCitizen button[type="submit"] {position:sticky;bottom:calc(8px + env(safe-area-inset-bottom, 0px));z-index:2}
  html.attention-mobile-dialog-open,
  html.attention-mobile-dialog-open body {
    overflow:hidden;
    overscroll-behavior:contain;
  }
  /* Both top-layer dialogs track the visual viewport while the OS keyboard is open. */
  #detail,.mass-push-dialog {
    position:fixed;
    inset:auto;
    top:var(--attention-vv-top, 0px);
    left:var(--attention-vv-left, 0px);
    width:var(--attention-vv-width, 100vw);
    height:var(--attention-vv-height, 100dvh);
    max-width:none;
    max-height:none;
    min-width:0;
    box-sizing:border-box;
    margin:0;
    transform:none;
    border-radius:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-block:12px calc(16px + env(safe-area-inset-bottom));
  }
  #detail:not([open]),.mass-push-dialog:not([open]) {display:none}
  #detailContent,#massPushDialogContent {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .detail-content,.mass-push-inner {
    width:100%;
    min-width:0;
    padding:calc(14px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-wrap:anywhere;
  }
  .detail-head,.mass-push-head {
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
    padding-block:6px;
    min-width:0;
  }
  .detail-head h2,.mass-push-head h2 {min-width:0;overflow-wrap:anywhere}
  .detail-head button,.mass-push-head>button {flex:none;min-width:44px;min-height:44px}
  .detail-section,.detail-actions,.thread,.message {min-width:0;max-width:100%}
  .detail-section textarea {min-height:116px;max-height:45dvh}
  .detail-section select {min-height:44px}
  .mass-push-form,.mass-push-audience,.mass-push-preview {min-width:0;max-width:100%}
  .mass-push-actions {min-width:0}
  .mass-push-actions>button {flex:1 1 140px}
  /* A toast must not obscure the currently focused input. */
  #toast {max-width:calc(100vw - 24px);overflow-wrap:anywhere}
}
@media (max-width: 359px) {
  .detail-content,.mass-push-inner {padding-left:12px;padding-right:12px}
  .top {padding-inline:12px}
  .hero {padding-inline:14px}
  .inbox-section {padding-inline:12px}
  .mass-push-audience {gap:5px}
  .mass-push-kpi {padding-inline:3px}
}