/* IBEX Phone — deployable final UI: one coherent icon and layout treatment */
:root{--brand-navy:#00235a;--brand-orange:#f58220}
/* Navigation icon family: consistent 24px grid and stroke proportions on every device. */
.side-logo{display:block!important;width:142px!important;max-width:142px!important;height:auto!important;max-height:55px!important;object-fit:contain;object-position:left center}
.sidebar .side-top{padding-top:7px;padding-left:14px;padding-right:12px;padding-bottom:34px}
.sidebar .side-product{font-size:8.5px;letter-spacing:2.1px;margin-top:10px}
.sidebar .nav-link .icon{width:20px!important;height:20px!important;stroke-width:1.85}
.sidebar .nav-link[data-route="dialer"] .icon{stroke-width:1.95}
.top-brand img{width:108px;max-width:108px;max-height:41px;height:auto;object-fit:contain;object-position:left center}
.icon{vector-effect:non-scaling-stroke}
.mobile-nav button .icon{height:23px!important;width:23px!important;stroke-width:1.95!important;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mobile-nav button[data-route="dialer"] .icon{height:24px!important;width:24px!important}
.mobile-nav button[data-route="history"] .icon{height:23px!important;width:23px!important;stroke-width:2!important}
.mobile-nav button.mobile-selected .icon{stroke-width:2.1!important}
.mobile-nav button[data-route="siren"] .icon{height:22px!important;width:22px!important;stroke-width:1.85!important}
.mobile-nav button span{font-weight:650;letter-spacing:-.08px}
/* Large, symmetric DTMF asterisk: no emoji fallback or tiny font metrics. */
.dial-asterisk{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
#page-dialer .key[data-digit="*"]{display:flex;align-items:center;justify-content:center}
#page-dialer .key[data-digit="*"] .dial-asterisk{width:28px;height:28px;transform:none}
#page-dialer .key[data-digit="*"] small{font-size:9px;line-height:9px}
/* Favorites vector is crisp at small sizes and fills when selected. */
.contact-segment .icon:has(use[href="#i-star"]){width:21px;height:21px;stroke-width:2}
.favorite-action .icon.star-icon{width:23px!important;height:23px!important;stroke-width:1.9!important}
.favorite-action[aria-pressed="true"] .icon.star-icon{fill:var(--brand-orange)}
/* Icon shape consistency on call actions. */
.mini-call .handset-icon,.voicemail-direct-call .handset-icon{width:20px!important;height:20px!important;stroke-width:2!important;transform:none!important}
.dial-button#start-call .handset-icon{width:30px!important;height:30px!important;stroke-width:2.35!important;fill:none!important;transform:none!important}
/* Desktop: keep logo compact, and restore intentional breathing space in the form. */
@media(min-width:741px){
  #page-dialer .dialer-panel-header{padding-bottom:27px!important;margin-bottom:27px!important}
  #page-dialer .connection-banner{margin-top:0;margin-bottom:28px!important}
  #page-dialer .line-select-wrap{margin-top:3px!important}
  #page-dialer .number-field{margin-top:28px!important}
  #page-dialer .keypad{margin-top:18px}
  .mobile-nav{display:none}
}
/* Mobile light mode: calmer surfaces, consistent platform-like keypad, stronger contrast. */
@media(max-width:740px){
  .topbar{border-bottom:1px solid rgba(11,36,75,.045)}
  .top-brand{gap:10px}
  .top-brand img{width:112px!important;max-width:112px!important;height:auto;max-height:43px;object-fit:contain}
  .top-brand strong{font-size:10px;letter-spacing:1.65px}
  .main{padding:14px 16px calc(102px + env(safe-area-inset-bottom))}
  #page-dialer .page-intro{margin:0 2px 12px}
  #page-dialer .page-intro h1{font-weight:760;letter-spacing:-.9px;font-size:32px}
  #page-dialer .dialer-panel{padding:18px 18px 22px!important;border-radius:25px!important;box-shadow:0 12px 30px rgba(5,34,79,.055)!important;border:1px solid #e8eef7!important}
  #page-dialer .connection-banner{margin-bottom:15px;padding:11px 12px;min-height:57px;background:#fff8f1;border-color:#f4dec9}
  #page-dialer .connection-banner-copy strong{color:#8a4b0d}
  #page-dialer .line-picker{border:1px solid #e5ebf3!important;background:#f6f8fc!important;height:57px;border-radius:16px!important}
  #page-dialer .line-picker-icon{width:35px;height:35px;background:#fff;color:var(--brand-navy)}
  #page-dialer .line-picker-label strong{font-size:12px}
  #page-dialer .number-field{max-width:100%;min-height:63px;margin:15px auto 10px}
  #page-dialer .number-field input{height:63px;font-size:28px;font-weight:450}
  #page-dialer .number-field input::placeholder{color:#99a5b7;font-size:23px}
  #page-dialer .keypad{max-width:314px;grid-template-columns:repeat(3,1fr);justify-items:center;column-gap:9px;row-gap:11px;margin:10px auto 12px}
  #page-dialer .key{height:69px;width:69px;min-width:69px;border-radius:50%;background:#f1f4f9!important;border:1px solid #e9eef5!important;box-shadow:none!important}
  #page-dialer .key strong{font-size:29px;font-weight:460;color:#072858}
  #page-dialer .key small{font-size:9px;color:#667994}
  #page-dialer .dial-actions{margin-top:11px}
  #page-dialer .dial-button#start-call{height:70px;width:70px;min-height:70px;box-shadow:0 9px 20px rgba(245,130,32,.23)}
  .mobile-nav{height:calc(69px + env(safe-area-inset-bottom));padding:7px 7px env(safe-area-inset-bottom);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(7,30,71,.13)}
  .mobile-nav button{gap:5px;font-size:9.8px;min-width:0}
  .mobile-nav button.mobile-selected{color:#00235a;background:#eff3fa}
  .mobile-nav button.mobile-selected:after{background:var(--brand-orange);height:3px;top:2px}
}
/* Single dark surface vocabulary. Avoid bright outlines around each circle. */
html[data-theme="dark"] .side-logo{filter:none}
html[data-theme="dark"] #page-dialer .dialer-panel{background:#161f2d!important;border-color:#2b3749!important;box-shadow:none!important}
html[data-theme="dark"] #page-dialer .connection-banner{background:#252a34!important;border:1px solid #38404d!important}
html[data-theme="dark"] #page-dialer .line-picker{background:#202b3b!important;border-color:#334257!important}
html[data-theme="dark"] #page-dialer .key{background:#263347!important;border-color:#2e4056!important;color:#f1f5fa!important;box-shadow:none!important}
html[data-theme="dark"] #page-dialer .key strong{color:#f1f5fa!important}
html[data-theme="dark"] #page-dialer .key small{color:#b6c5d9!important}
html[data-theme="dark"] .mobile-nav{background:rgba(22,31,45,.96);border-color:#344052;box-shadow:0 12px 27px rgba(0,0,0,.25)}
html[data-theme="dark"] .mobile-nav button.mobile-selected{color:#f2f6fd;background:#273648}
html[data-theme="dark"] .mobile-nav button{color:#adb8c9}
html[data-theme="dark"] .system-health{background:#161f2d}
/* Settings is the intentional home for testing simulated incoming calls. */
.incoming-test-panel{margin:17px 0 20px!important;max-width:100%;padding:25px 28px}
.incoming-test-panel .panel-header{padding-bottom:8px}
.incoming-test-panel h2{margin:5px 0;font-size:18px;color:#00235a}
.incoming-test-panel .outline-button{margin-top:14px;max-width:270px}
html[data-theme="dark"] .incoming-test-panel{background:#161f2d;border-color:#2b3749}
html[data-theme="dark"] .incoming-test-panel h2{color:#f1f5fa}
@media(max-width:740px){.incoming-test-panel{padding:20px 18px;margin:12px 0 16px!important}.incoming-test-panel .outline-button{max-width:none;width:100%}}
@media(max-width:375px){#page-dialer .key{height:64px;width:64px;min-width:64px}#page-dialer .keypad{row-gap:9px}}
/* Shorter mobile Safari viewports: keep the complete call control above the tab bar. */
@media(max-width:740px) and (max-height:870px){
  .topbar{height:60px!important;min-height:60px!important}
  .main{padding-top:9px!important}
  #page-dialer .page-intro{margin-bottom:8px!important}
  #page-dialer .page-intro h1{font-size:29px!important;line-height:1.12}
  #page-dialer .page-intro p{margin-top:2px!important;font-size:11px!important}
  #page-dialer .dialer-panel{padding:14px 15px 16px!important}
  #page-dialer .connection-banner{min-height:49px;margin-bottom:10px!important;padding:7px 11px!important}
  #page-dialer .line-picker{height:51px!important}
  #page-dialer .number-field{margin:7px auto 5px!important;min-height:52px!important}
  #page-dialer .number-field input{height:52px!important;font-size:27px!important}
  #page-dialer .number-field input::placeholder{font-size:21px!important}
  #page-dialer .keypad{margin:5px auto 8px!important;row-gap:8px!important}
  #page-dialer .key{width:63px!important;height:63px!important;min-width:63px!important}
  #page-dialer .key strong{font-size:27px!important}
  #page-dialer .dial-asterisk{height:27px!important;width:27px!important}
  #page-dialer .dial-actions{margin-top:7px!important}
  #page-dialer .dial-button#start-call{height:64px!important;width:64px!important;min-height:64px!important}
  #page-dialer .call-action-hint{margin-top:3px!important}
  #page-dialer .dialer-foot{margin-top:6px!important}
}