/* Phone calendar windows keep their actions reachable and their note composer compact. */
body>.calendar-appointment-hover :is(.calendar-hover-close-v5,.calendar-hover-details-v5){
  display:none;
}

@media(max-width:760px){
  .premium-app .ironflow-calendar-page .calendar-shell .appointment-inspector-v2{
    height:calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  body>.calendar-appointment-hover{
    width:calc(100vw - 20px)!important;
    max-height:calc(100svh - 20px)!important;
    z-index:9400!important;
    padding:10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body>.calendar-appointment-hover dl{
    gap:6px!important;
    margin-top:9px!important;
  }

  body>.calendar-appointment-hover dl>div{
    padding:7px!important;
  }

  body>.calendar-appointment-hover .calendar-hover-heading-v2{
    gap:6px!important;
  }

  body>.calendar-appointment-hover .calendar-hover-heading-v2>div:first-child{
    min-width:0;
    margin-right:auto;
  }

  body>.calendar-appointment-hover .calendar-hover-edit-v2{
    min-width:0!important;
    padding:0 9px!important;
  }

  body>.calendar-appointment-hover .calendar-hover-close-v5{
    display:grid!important;
    width:34px;
    height:34px;
    flex:0 0 34px;
    place-items:center;
    padding:0;
    border:1px solid #365066;
    border-radius:50%;
    background:#07131d;
    color:#eaf2f9;
  }

  body>.calendar-appointment-hover .calendar-hover-close-v5 svg{
    width:16px;
    height:16px;
  }

  body>.calendar-appointment-hover .calendar-hover-notes-v4{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    align-items:end!important;
  }

  body>.calendar-appointment-hover .calendar-hover-note-history{
    grid-column:1 / -1;
    max-height:44px;
    overflow:auto;
  }

  body>.calendar-appointment-hover .calendar-hover-note-composer{
    display:block!important;
    min-width:0;
  }

  body>.calendar-appointment-hover .calendar-hover-note-composer>span{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;
  }

  body>.calendar-appointment-hover .calendar-hover-note-composer textarea{
    display:block!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    padding:7px 8px!important;
    resize:none!important;
  }

  body>.calendar-appointment-hover .calendar-hover-note-save{
    min-height:38px!important;
    padding:0 10px!important;
    white-space:nowrap;
  }

  body>.calendar-appointment-hover .calendar-hover-project-actions-v3{
    display:grid!important;
    gap:6px!important;
    margin-top:8px!important;
    padding-top:8px!important;
  }

  body>.calendar-appointment-hover .calendar-hover-details-v5{
    display:flex!important;
    min-height:38px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 10px;
    border:1px solid #47647c;
    border-radius:7px;
    background:#0b1927;
    color:#eaf2f9;
    font:800 12px/1 "Segoe UI",Arial,sans-serif;
  }

  body>.calendar-appointment-hover .calendar-hover-details-v5 svg{
    width:16px;
    height:16px;
  }

  body>.calendar-appointment-hover .calendar-hover-project-v3{
    min-height:42px!important;
  }
}