/* IBEX Phone V23 — precise mobile gestures, brand actions and compact dialer.
   Inherit V22 (with all previous Supabase, Siren and Twilio logic intact). */
/* Don't compete with the main keypad on the dedicated Dialer page. */
.quick-dial-dock[hidden],body:has(#page-dialer.page-active) .quick-dial-dock {display:none!important}
/* V23 brand: orange means the Quick Dial primary call action. */
.quick-call-go{background:#f58220!important;color:#fff!important;box-shadow:0 7px 18px rgba(205,89,5,.2)}
.quick-call-go:hover,.quick-call-go:focus-visible{background:#de6c0a!important}
.quick-call-go:active{transform:scale(.985)}
/* Compact cards no longer grow when history grows. A scrollbar belongs inside the list. */
#page-dialer .dashboard-aside .activity-panel{display:flex!important;flex-direction:column;overflow:hidden!important;min-height:0}
#page-dialer #recent-calls{display:flex!important;flex:1 1 auto!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#b8cae2 transparent;padding-right:3px}
#page-dialer #recent-calls>.activity-row{flex:0 0 auto!important;min-height:51px!important;padding:8px 6px!important}
#page-dialer #recent-calls::-webkit-scrollbar{width:5px}
#page-dialer #recent-calls::-webkit-scrollbar-thumb{border-radius:6px;background:#bbcce1}
/* Desktop: stop stretching the dialer to the bottom of tall windows. */
@media(min-width:901px){
  #page-dialer .dashboard-grid{min-height:0!important;height:clamp(575px,calc(100dvh - 275px),640px)!important;max-height:640px!important;align-items:stretch!important}
  #page-dialer .dialer-panel{height:100%!important;min-height:0!important;overflow:hidden!important;justify-content:flex-start}
  #page-dialer .dialer-panel .keypad{flex:1 1 auto!important;min-height:218px!important;align-content:center!important;row-gap:clamp(5px,0.8vh,10px)!important;margin:4px auto 6px!important}
  #page-dialer .dialer-panel .key{height:clamp(47px,3.9vw,58px)!important;width:clamp(47px,3.9vw,58px)!important;min-width:47px!important}
  #page-dialer .dashboard-aside{height:100%!important;min-height:0!important;grid-template-rows:auto minmax(0,1fr)!important}
  #page-dialer .dashboard-aside .activity-panel{height:100%!important;max-height:none!important}
}
/* Short desktop viewports: preserve access to every action by allowing normal page scrolling. */
@media(min-width:901px) and (max-height:710px){
  #page-dialer .dashboard-grid{height:575px!important}
}
/* Tablet/stacked: keep recent calls a bounded panel. */
@media(min-width:741px) and (max-width:900px){
  #page-dialer .dashboard-aside .activity-panel{height:365px!important;max-height:365px!important}
}
@media(max-width:740px){
  /* Shorter mobile dialer; no fixed menu overlapping the call button. */
  #page-dialer .dialer-panel{min-height:0!important;padding-top:12px!important;padding-bottom:14px!important;margin-bottom:6px!important}
  #page-dialer .dialer-panel .line-picker{height:45px!important}
  #page-dialer .dialer-panel .line-select-wrap{height:auto!important;margin:3px 0 7px!important}
  #page-dialer .dialer-panel .number-field{min-height:42px!important;margin:3px auto!important}
  #page-dialer .dialer-panel .number-field input{height:42px!important}
  #page-dialer .dialer-panel .keypad{max-width:275px!important;column-gap:10px!important;row-gap:5px!important;margin:6px auto 7px!important}
  #page-dialer .dialer-panel .key{width:clamp(49px,14vw,55px)!important;min-width:49px!important;height:clamp(49px,14vw,55px)!important}
  #page-dialer .dialer-panel .key strong{font-size:23px!important}
  #page-dialer .dialer-panel .dial-actions{margin:6px auto 0!important}
  #page-dialer .dialer-panel #start-call{height:49px!important;min-height:49px!important;width:49px!important}
  #page-dialer .dialer-panel .dialer-foot{margin:5px 0 0!important}
  #page-dialer .dashboard-aside .activity-panel{height:353px!important;max-height:353px!important;min-height:0!important}
  #page-dialer .dashboard-aside #recent-calls{min-height:0!important;max-height:none!important}
  #page-dialer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
  /* Gesture-compatible native-feeling bottom sheets. */
  .v23-swipe-handle{width:39px;height:5px;margin:9px auto 6px;display:block;border-radius:99px;background:#bccbdb;flex:0 0 auto}
  .siren-conversation-dialog,.v22-details-sheet,.v23-voicemail-sheet{transition:transform .22s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .v23-is-dragging{transition:none!important;animation:none!important}
  .siren-conversation-dialog{position:relative}
  .siren-conversation-header{height:calc(52px + env(safe-area-inset-top));min-height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .v22-details-overlay{align-items:flex-end!important}
  .v22-details-sheet{height:min(88dvh,790px);max-height:88dvh!important;border-radius:22px 22px 0 0!important;box-shadow:0 -22px 60px rgba(10,29,60,.28)!important;overflow-y:auto!important;padding-top:9px!important;overscroll-behavior:contain}
  .v22-details-sheet .v23-swipe-handle{margin:0 auto 16px}
}
@media(min-width:741px){.v23-swipe-handle{display:none}}
.v23-voicemail-overlay[hidden]{display:none!important}
.v23-voicemail-overlay{position:fixed;inset:0;z-index:3000;display:none;align-items:flex-end;justify-content:center}
.v23-voicemail-shade{position:absolute;inset:0;background:rgba(6,22,49,.56);backdrop-filter:blur(3px)}
.v23-voicemail-sheet{position:relative;width:100%;max-width:600px;height:auto;max-height:87dvh;display:flex;flex-direction:column;border-radius:23px 23px 0 0;background:#fff;color:#103562;box-shadow:0 -18px 60px rgba(6,30,76,.28);padding:5px 16px calc(env(safe-area-inset-bottom) + 20px);overflow:hidden}
.v23-voicemail-heading{display:flex;justify-content:space-between;align-items:center;padding:11px 6px 14px;border-bottom:1px solid #e8edf4}
.v23-voicemail-heading h2{font-size:19px;line-height:1.15;letter-spacing:-.4px;margin:5px 0 0}
.v23-voicemail-heading button{border:1px solid #dbe5f0;border-radius:11px;min-width:36px;min-height:36px;background:#f8fafd;color:#24456c}
.v23-voicemail-body{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.v23-voicemail-body .voicemail-transcript{padding:14px 4px 6px;border:none;background:transparent}
.v23-voicemail-body .voicemail-actions{margin-top:15px}
body.v23-voicemail-open{overflow:hidden}
html[data-theme='dark'] .v23-voicemail-sheet{background:#102840;color:#eaf3ff}
html[data-theme='dark'] .v23-voicemail-heading{border-color:#314866}
html[data-theme='dark'] .v23-voicemail-heading button{background:#243952;color:#e9f2ff;border-color:#45607c}
@media(max-width:740px){.v23-voicemail-overlay:not([hidden]){display:flex}}
@media(prefers-reduced-motion:reduce){.siren-conversation-dialog,.v22-details-sheet,.v23-voicemail-sheet{transition:none!important}}
/* Existing tablet styles use horizontal flex for generic call lists. Keep recents vertical. */
#page-dialer #recent-calls{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important}
#page-dialer #recent-calls>.activity-row{width:100%;max-width:100%;box-sizing:border-box}
@media(min-width:741px) and (max-width:900px){
 #page-dialer .dashboard-aside .activity-panel{flex:0 0 353px!important;height:353px!important;min-height:353px!important;max-height:353px!important}
}
/* When transcript content is moved into the mobile sheet, don't replay the
   original inline reveal/fade animation (which temporarily washed out text). */
.v23-voicemail-body .voicemail-transcript{animation:none!important;transform:none!important;opacity:1!important;margin:0!important}
.v23-voicemail-body .voicemail-transcript-title{color:#5175a1;font-weight:850}
.v23-voicemail-body .voicemail-transcript p{color:#304d72}
html[data-theme='dark'] .v23-voicemail-body .voicemail-transcript-title{color:#abcaf0}
html[data-theme='dark'] .v23-voicemail-body .voicemail-transcript p{color:#dbe6f5}
/* Keep the floating launcher out of mobile detail/conversation sheets. */
body:has(#siren-conversation-overlay:not([hidden])) .quick-dial-dock,
body:has(#v22-details-overlay:not([hidden])) .quick-dial-dock,
body:has(#v23-voicemail-overlay:not([hidden])) .quick-dial-dock{display:none!important}
/* Short phones: keep the Call action and its label clear of the tab bar without
   sacrificing the 44px minimum touch target on keypad buttons. */
@media(max-width:740px) and (max-height:730px){
 #page-dialer .page-intro{margin-bottom:8px!important}
 #page-dialer .dialer-panel{padding-top:10px!important;padding-bottom:8px!important}
 #page-dialer .dialer-panel .connection-banner{min-height:37px!important;margin-bottom:6px!important;padding-block:5px!important}
 #page-dialer .dialer-panel .line-select-wrap{margin:1px 0 4px!important}
 #page-dialer .dialer-panel .line-picker{height:40px!important}
 #page-dialer .dialer-panel .number-field{min-height:38px!important;margin:0 auto!important}
 #page-dialer .dialer-panel .number-field input{height:38px!important}
 #page-dialer .dialer-panel .keypad{row-gap:3px!important;margin:3px auto 5px!important}
 #page-dialer .dialer-panel .key{height:44px!important;min-width:44px!important;width:44px!important}
 #page-dialer .dialer-panel .dial-actions{margin:2px auto 0!important}
 #page-dialer .dialer-panel .call-action-hint{margin-top:0!important}
 #page-dialer .dialer-panel .dialer-foot{display:none!important}
}