/* V22 — measured refinement of V21. No change to core Account, Siren or Twilio flows. */
:root{--v21-workspace-max:1390px;--v21-workspace-gutter:clamp(20px,2.7vw,43px)}
/* Slightly larger canvas than V21, without the edge-to-edge V20 look. */
@media(min-width:741px){
  body .content-wrap .main{max-width:var(--v21-workspace-max)!important}
  .sidebar{transition:width .23s ease,flex-basis .23s ease}
  body.sidebar-collapsed .sidebar{width:78px!important;flex:0 0 78px!important;padding:22px 10px!important}
  body.sidebar-collapsed .side-logo{width:42px;max-width:42px;object-position:left;object-fit:cover;overflow:hidden}
  body.sidebar-collapsed .side-product,body.sidebar-collapsed .side-menu-label,body.sidebar-collapsed .nav-link>span,body.sidebar-collapsed .side-account>span:nth-child(2),body.sidebar-collapsed .v17-profile-chevron{display:none!important}
  body.sidebar-collapsed .side-top{padding:16px 7px 30px!important}
  body.sidebar-collapsed .nav-link{justify-content:center!important;width:56px;padding:0!important;margin:0 auto}
  body.sidebar-collapsed .nav-link .icon{width:22px;height:22px}
  body.sidebar-collapsed .side-account{min-width:0;width:55px;justify-content:center;padding:8px!important}
  body.sidebar-collapsed #v17-profile-menu{left:65px;bottom:0;width:236px}
}
.sidebar{position:sticky}
.sidebar-collapse-btn{position:absolute;top:11px;right:8px;width:28px;height:28px;padding:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:9px;display:grid;place-items:center;color:#c5d7ef;z-index:2;transition:background .16s ease}
.sidebar-collapse-btn .icon{width:16px;height:16px}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.18);color:#fff}
body.sidebar-collapsed .sidebar-collapse-btn{right:18px;top:9px}
@media(max-width:740px){.sidebar-collapse-btn{display:none}}
/* Decrease *actual* row gaps on the homepage; no fake stretch-to-fill. */
#page-dialer .dashboard-aside .activity-panel #recent-calls{justify-content:flex-start!important;gap:4px!important}
#page-dialer .dashboard-aside .activity-panel #recent-calls>.activity-row{flex:0 0 auto!important;min-height:53px!important;max-height:none!important;padding:9px 8px!important;margin:0!important;gap:8px!important}
#page-dialer .dashboard-aside .activity-panel #recent-calls>.activity-row+.activity-row{border-top:1px solid rgba(20,55,100,.08)}
#page-dialer .dashboard-aside .activity-panel{justify-content:flex-start}
#page-dialer .dashboard-aside .activity-panel #recent-calls .activity-time{white-space:nowrap}
/* Selectable detail surfaces: preserve existing call buttons and favorite buttons. */
.activity-details[role='button'],.contact-details[role='button']{cursor:pointer}
.activity-details[role='button']:hover strong,.contact-details[role='button']:hover strong{color:#1457b4}
.activity-details[role='button']:focus-visible,.contact-details[role='button']:focus-visible{outline:2px solid #ef9a4a;outline-offset:3px;border-radius:5px}
.v22-details-btn,.v22-contact-details-link{border:1px solid #dbe5f1;border-radius:9px;padding:7px 10px;background:#f6f9fd;color:#285181;font-size:11px;font-weight:750;white-space:nowrap}
.v22-details-btn:hover,.v22-contact-details-link:hover{background:#eaf3ff}
#history-list .activity-row{gap:11px;flex-wrap:wrap}
#history-list .v22-history-meta{font-size:11px;color:#617b9b;flex:0 0 100%;order:10;margin-left:54px;margin-top:-2px;line-height:1.5}
#history-list .v22-details-btn{margin-left:auto}
#history-list .activity-time{white-space:nowrap}
#contact-list .v22-contact-details-link{margin-left:auto}
#contact-list .contact-card{gap:9px}
/* Reusable contact/call details sheet */
.v22-details-overlay{position:fixed;inset:0;z-index:3100;display:flex;justify-content:flex-end;align-items:stretch}
.v22-details-overlay[hidden]{display:none}
.v22-details-shade{position:absolute;inset:0;background:rgba(4,23,50,.48);backdrop-filter:blur(2px)}
.v22-details-sheet{position:relative;width:min(430px,100%);overflow:auto;max-height:100dvh;background:#fff;box-shadow:-12px 0 60px rgba(10,29,60,.24);padding:32px 30px 38px;animation:v22slide .2s ease both}
@keyframes v22slide{from{transform:translateX(20px);opacity:.7}to{transform:translateX(0);opacity:1}}
.v22-detail-top{display:flex;justify-content:space-between;align-items:center}
.v22-detail-top>button{border:1px solid #e0e9f3;background:#f4f7fa;width:36px;height:36px;border-radius:12px;color:#24446d;font-size:17px}
.v22-details-sheet h2{color:#08265a;font-size:28px;letter-spacing:-.9px;line-height:1.2;margin:35px 0 6px}
.v22-detail-subtitle{font-size:13px;color:#66809b;margin:0 0 30px;line-height:1.55}
.v22-detail-rows{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0;margin:0;border-top:1px solid #e8eef6}
.v22-detail-rows dt,.v22-detail-rows dd{font-size:12px;margin:0;border-bottom:1px solid #e8eef6;padding:17px 4px;line-height:1.5;overflow-wrap:anywhere}
.v22-detail-rows dt{font-weight:700;color:#7a8da7}
.v22-detail-rows dd{font-weight:700;color:#142f58}
.v22-detail-actions{display:flex;gap:10px;margin-top:25px}
.v22-detail-primary,.v22-detail-email{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;line-height:1.2;text-decoration:none;font-size:12px;font-weight:800}
.v22-detail-primary{background:#002e70;color:white;border:0}
.v22-detail-email{color:#003975;border:1px solid #dae4f2;background:#f5f8fd}
/* Voicemail recording UI: never mislabel generated voice as original recording. */
.v22-voicemail-audio{margin:12px 0 15px;padding:12px 14px;border:1px solid #dfe8f5;background:#f8fbff;border-radius:12px}
.v22-playback-row audio{width:100%;max-width:440px;height:38px;display:block}
.v22-playback-row .v22-listen,.v22-read-aloud{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#174d8f;border:1px solid #dbe6f5;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:800}
.v22-playback-row .v22-listen:disabled{opacity:.56}
.v22-read-aloud{margin:8px 0 3px;color:#fff;background:#154e9a;border-color:#154e9a}
.v22-read-aloud .icon,.v22-listen .icon{height:15px;width:15px}
.v22-voicemail-audio>small{color:#7185a0;font-size:11px;display:block;line-height:1.4}
/* Persistent quick-dial surface, floats above the selected page. */
.quick-dial-dock{position:fixed;right:27px;bottom:23px;z-index:1750;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.quick-dial-dock>*{pointer-events:auto}
.quick-dial-launch{border:1px solid rgba(255,255,255,.26);background:#082b65;color:white;border-radius:17px;padding:14px 18px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;box-shadow:0 9px 28px rgba(0,31,80,.22)}
.quick-dial-launch .icon{width:20px;height:20px}
.quick-dial-launch:hover{background:#18438a}
.quick-dial-panel{width:310px;max-width:calc(100vw - 30px);background:white;color:#12345b;border:1px solid #dee7f3;border-radius:21px;padding:20px;box-shadow:0 20px 65px rgba(2,29,77,.22);max-height:min(630px,calc(100dvh - 110px));overflow:auto}
.quick-dial-panel[hidden]{display:none}
.quick-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.quick-panel-heading h2{font-size:20px;line-height:1.2;margin:4px 0 0;letter-spacing:-.7px;color:#082e6d}
.quick-panel-heading>button{width:30px;height:30px;border:1px solid #e0e6ef;background:#f6f8fb;border-radius:9px}
.quick-dial-hint{font-size:11px;color:#6b809c;line-height:1.5;margin:0 0 14px}
.quick-dial-panel label{font-size:11px;color:#466184;font-weight:800;display:block;margin-bottom:7px}
.quick-number-wrap{display:flex;align-items:center;border:1px solid #d4e0ef;border-radius:10px;background:#f9fbff;overflow:hidden}
.quick-number-wrap input{border:0;background:transparent;min-width:0;flex:1;font-size:15px;padding:12px;color:#0a346d}
.quick-number-wrap button{background:none;border:0;padding:0 12px;color:#6d829d;font-size:22px}
.quick-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}
.quick-pad button{height:43px;border-radius:12px;background:#f4f7fd;border:1px solid #e4ebf5;font-size:17px;color:#102f63;font-weight:700}
.quick-pad button:hover{background:#e7effd}
.quick-call-go{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;padding:13px;border-radius:11px;border:0;background:#0d8d58;color:white;font-size:13px;font-weight:800}
.quick-line-caption{font-size:10px;text-align:center;color:#8293a9;margin-top:9px}
html[data-theme='dark'] .v22-details-sheet,html[data-theme='dark'] .quick-dial-panel{background:#102b4f;color:#e5eef8;border-color:#36516e}
html[data-theme='dark'] .v22-details-sheet h2,html[data-theme='dark'] .v22-detail-rows dd,html[data-theme='dark'] .quick-panel-heading h2{color:#edf6ff}
html[data-theme='dark'] .v22-detail-rows dt,html[data-theme='dark'] .v22-detail-rows dd{border-color:#37506b}
html[data-theme='dark'] .v22-history-meta{color:#a7c0d9}
html[data-theme='dark'] .v22-voicemail-audio{background:#133153;border-color:#35516f}
html[data-theme='dark'] .v22-voicemail-audio>small,html[data-theme='dark'] .quick-dial-hint{color:#b2c4dc}
html[data-theme='dark'] .quick-number-wrap{background:#0c2546;border-color:#446084}
html[data-theme='dark'] .quick-number-wrap input{color:#fff}
html[data-theme='dark'] .quick-pad button{background:#193a61;color:#e3f0ff;border-color:#36577c}
@media(max-width:740px){
 .quick-dial-dock{bottom:calc(80px + env(safe-area-inset-bottom));right:14px}
 .quick-dial-launch{border-radius:16px;padding:12px 14px}
 .quick-dial-panel{max-height:min(600px,calc(100dvh - 160px));width:min(315px,calc(100vw - 24px))}
 .v22-details-sheet{width:100%;padding:25px 19px calc(24px + env(safe-area-inset-bottom))}
 .v22-detail-rows{grid-template-columns:115px minmax(0,1fr)}
 #history-list .v22-history-meta{margin-left:0}
 #history-list .activity-row{gap:8px}
}
/* More recents in the same space, with a scrollable list when the panel is shorter. */
#page-dialer .dashboard-aside .activity-panel #recent-calls{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ced9ea transparent}
#page-dialer .dashboard-aside .activity-panel #recent-calls>.activity-row{flex-shrink:0}
@media(min-width:741px){
 body.sidebar-collapsed .sidebar{min-width:78px!important;max-width:78px!important;overflow:visible}
 body.sidebar-collapsed .side-logo{display:none!important}
 body.sidebar-collapsed .side-top::after{content:'IB';display:grid;place-items:center;width:39px;height:39px;margin:0 auto;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:11px;font-size:17px;letter-spacing:-.6px;font-weight:850}
 body.sidebar-collapsed .v17-profile-wrap{min-width:0}
}
@media(min-width:741px){
 .sidebar .sidebar-collapse-btn{position:static!important;display:flex!important;align-items:center;justify-content:flex-start;gap:10px;text-align:left;width:100%;height:40px;min-height:40px;margin:0 0 14px;padding:0 12px;z-index:1;font-size:11px;font-weight:740;color:#b8cee8;letter-spacing:.1px;border-radius:10px;background:rgba(255,255,255,.05)}
 .sidebar .sidebar-collapse-btn .icon{height:17px;width:17px}
 body.sidebar-collapsed .sidebar .sidebar-collapse-btn{width:55px!important;justify-content:center!important;padding:0!important;margin:0 auto 12px}
 body.sidebar-collapsed .sidebar-toggle-label{display:none!important}
}
/* Call dialogs take precedence over launching another outgoing call. */
body:has(#call-overlay:not([hidden])) .quick-dial-dock,
body:has(#incoming-overlay:not([hidden])) .quick-dial-dock,
body:has(#line-sheet:not([hidden])) .quick-dial-dock{display:none!important}