/* IBEX Phone V10 — final UI pass. Same source of truth in desktop and mobile. */
:root{--ibex-ink:#00235a;--ibex-orange:#f58220}
/* Precision-stroked phone and favorite: no emoji or solid clip-art. */
.icon.handset-icon,.dial-button#start-call .handset-icon,.mini-call .handset-icon,.voicemail-direct-call .handset-icon{
  fill:none!important;stroke:currentColor!important;stroke-width:2.25!important;stroke-linecap:round;stroke-linejoin:round;
  transform:none!important
}
.dial-button#start-call .handset-icon{width:30px!important;height:30px!important}
.icon.star-icon,.favorite-action .star-icon{stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round;fill:none}
.favorite-action[aria-pressed=true] .star-icon{fill:#f58220;stroke:#f58220}
.key-asterisk{font-family:Arial,Helvetica,sans-serif!important;font-weight:470!important;font-variant-emoji:text;line-height:1.1;transform:translateY(4px)}
#page-dialer .keypad .key[data-digit="*"]{font-family:Arial,Helvetica,sans-serif!important}
/* Deliberately restrained connection status, not a fake connected indicator. */
.connection-banner{
  display:flex;align-items:center;gap:12px;
  border:1px solid #f2d9c1;background:#fff9f4;
  border-radius:16px;padding:12px 14px;
  margin:17px 0 20px;min-height:62px;color:#83500f
}
.connection-beacon{width:9px;height:9px;border-radius:50%;background:#dc8c34;box-shadow:0 0 0 4px rgba(245,130,32,.1);flex:none}
.connection-banner-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.connection-banner-copy strong{font-size:13px;font-weight:780;color:#75450f;letter-spacing:-.12px}
.connection-banner-copy small{font-size:11px;color:#9d7b5a}
.connection-banner-state{font-size:9px;letter-spacing:1px;font-weight:850;color:#a3682a;background:#f9eadb;border-radius:999px;padding:7px 9px}
.connection-banner.device-offline{background:#fff3f3;border-color:#f3d0d0}
.connection-banner.device-offline .connection-beacon{background:#df554c}
/* Desktop spacing, especially New call → Calling from. */
@media(min-width:741px){
  #page-dialer .dialer-panel{padding:36px 37px 30px!important}
  #page-dialer .dialer-panel-header{margin:0 0 25px!important;padding:0 0 24px!important;border-bottom:1px solid #e8edf5}
  #page-dialer .dialer-panel-header h2{font-size:25px;line-height:1.23;margin:7px 0 0}
  #page-dialer .connection-banner{margin-top:0;margin-bottom:24px}
  #page-dialer .line-select-wrap{margin-top:0}
  #page-dialer .line-picker{height:72px;border-radius:16px}
  #page-dialer .number-field{margin-top:23px}
  #page-dialer .dial-button#start-call{width:76px;height:76px}
}
/* Health panel: the indicators reflect browser/network/auth; voice is not connected. */
.system-health{padding:26px 28px;margin-bottom:20px;border-radius:22px;background:#fff}
.system-health-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:19px;border-bottom:1px solid #e8edf3}
.system-health-head h2{margin:7px 0 6px;color:#00235a;font-size:23px;letter-spacing:-.5px}
.system-health-head p{margin:0;color:#7b8ca5;font-size:12px;line-height:1.6}
.health-pill{display:flex;gap:9px;align-items:center;flex:none;background:#fff5eb;border:1px solid #f3d6b7;color:#936027;padding:9px 12px;border-radius:999px;font-weight:770;font-size:10px}
.health-list{display:flex;flex-direction:column}
.health-item{display:flex;align-items:center;gap:13px;padding:15px 2px;border-bottom:1px solid #e9edf4}
.health-item:last-child{border-bottom:0}
.health-item-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;background:#eff3f9;color:#00235a;border-radius:12px}
.health-item-icon .icon{width:18px;height:18px}
.health-item>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.health-item>span:nth-child(2) strong{font-size:12.5px;color:#163052;font-weight:750}
.health-item>span:nth-child(2) small{font-size:11px;color:#8493a9;line-height:1.5}
.health-state{font-size:10.5px;border-radius:50px;padding:7px 10px;font-weight:780;text-align:right;white-space:nowrap}
.health-state.off{background:#fff3e8;color:#986129}
.health-state.online{background:#e7f6ed;color:#267449}
.health-state.neutral{background:#eef2f8;color:#6d8099}
.system-health-foot{color:#8593a8;font-size:10.5px;margin:9px 2px 0;line-height:1.6}
/* Call window: a real foreground sheet, preserving origin screen, with native proportions. */
#call-overlay{background:rgba(3,16,36,.72);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
#call-overlay .call-screen{
  background:radial-gradient(circle at 50% 4%,#1b497f 0%,#0c2b59 42%,#091c3b 95%);
  border:1px solid rgba(211,230,255,.17);box-shadow:0 28px 90px rgba(0,9,26,.36)
}
#call-overlay .call-avatar-large{border-radius:50%;border:1px solid rgba(255,255,255,.17);background:#234774}
#call-overlay .call-out-label{color:#b8d4f5;letter-spacing:1.2px;text-transform:none;font-weight:670;font-size:13px}
#call-overlay .call-center h2{font-size:29px;letter-spacing:-.7px}
#call-overlay .call-buttons button span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.105)}
#call-overlay .end-call{border-radius:18px;background:#ed4f4a}
/* One defined dark-mode hierarchy with no unrelated glossy colors. */
html[data-theme="dark"] .connection-banner{background:#222a36;border-color:#353d4a;color:#f2c695}
html[data-theme="dark"] .connection-banner-copy strong{color:#f3ceaa}
html[data-theme="dark"] .connection-banner-copy small{color:#aebcce}
html[data-theme="dark"] .connection-banner-state{background:#35303a;color:#ffbd78}
html[data-theme="dark"] .system-health{background:#161f2d;border:1px solid #2b3749;box-shadow:none}
html[data-theme="dark"] .system-health-head{border-color:#2c394a}
html[data-theme="dark"] .system-health-head h2{color:#f1f5fa}
html[data-theme="dark"] .system-health-head p,html[data-theme="dark"] .system-health-foot{color:#9baac1}
html[data-theme="dark"] .health-pill{background:#282937;border-color:#453b38;color:#ffc187}
html[data-theme="dark"] .health-item{border-color:#2b3749}
html[data-theme="dark"] .health-item-icon{background:#263347;color:#e9f1ff}
html[data-theme="dark"] .health-item>span:nth-child(2) strong{color:#f0f5fc}
html[data-theme="dark"] .health-item>span:nth-child(2) small{color:#a7b7ca}
html[data-theme="dark"] .health-state.off{background:#35303a;color:#f5bd8c}
html[data-theme="dark"] .health-state.online{background:#183e32;color:#8de7ba}
html[data-theme="dark"] .health-state.neutral{background:#263347;color:#bdcee0}
html[data-theme="dark"] #page-dialer .dialer-panel-header{border-color:#2e3a4a}
html[data-theme="dark"] #page-dialer .key{box-shadow:none!important;background:#263347!important;border:1px solid #35465a!important;color:#f1f5fa!important}
html[data-theme="dark"] #page-dialer .key:active{background:#34465f!important}
/* Mobile iOS dialer: flatter, spacious, distinctly white/brand-navy, not gray and washed-out. */
@media(max-width:740px){
  html:not([data-theme="dark"]) body,html:not([data-theme="dark"]) .app{background:#f6f7fb}
  .main{padding-top:12px}
  #page-dialer .page-intro{margin:0 2px 8px}
  #page-dialer .page-intro h1{font-size:31px;font-weight:780;letter-spacing:-1.1px}
  #page-dialer .page-intro p{font-size:11.5px;margin-top:3px}
  #page-dialer .preview-note{display:none}
  #page-dialer .dialer-panel{padding:18px 17px 19px!important;border-radius:28px!important;background:#fff!important;border:1px solid #e8edf5!important;box-shadow:0 12px 42px rgba(0,35,90,.065)!important;overflow:visible!important}
  #page-dialer .dialer-panel:before,#page-dialer .dialer-panel:after{display:none!important}
  #page-dialer .connection-banner{margin:0 0 15px;padding:9px 11px;min-height:50px;border-radius:13px;gap:10px}
  #page-dialer .connection-banner-copy strong{font-size:11.5px}
  #page-dialer .connection-banner-copy small{font-size:9.5px}
  #page-dialer .connection-banner-state{font-size:8px;padding:6px}
  #page-dialer .line-select-wrap{margin:0 auto}
  #page-dialer .line-picker{height:55px;background:#f7f9fc!important;border:1px solid #e6ecf4!important;border-radius:15px;box-shadow:none}
  #page-dialer .line-picker-icon{background:#fff;border:1px solid #e9edf5;box-shadow:none}
  #page-dialer .number-field{margin:13px auto 7px;min-height:58px}
  #page-dialer .number-field input{font-size:29px;height:57px;color:#00235a}
  #page-dialer .number-field input::placeholder{font-size:22px;color:#9ba9bd}
  #page-dialer .keypad{max-width:300px;column-gap:12px;row-gap:11px;margin:7px auto 12px}
  #page-dialer .key{width:67px;height:67px;min-width:67px;background:#f4f6fa!important;border:1px solid #eef1f7!important;box-shadow:none!important;transition:transform .08s,background .08s}
  #page-dialer .key strong{font-size:28px;color:#072858}
  #page-dialer .key small{color:#687a95}
  #page-dialer .dial-actions{margin-top:10px}
  #page-dialer .dial-button#start-call{width:68px;height:68px;min-height:68px;box-shadow:0 8px 18px rgba(245,130,32,.25);background:#f58220;border:0}
  #page-dialer .call-action-hint{font-size:10.5px;margin-top:6px}
  #page-dialer .dialer-foot{margin-top:9px;font-size:9px;color:#8697ac}
  .system-health{padding:19px 17px;border-radius:20px;margin-bottom:14px}
  .system-health-head h2{font-size:20px}
  .health-pill{padding:7px 9px;font-size:9px}
  .health-item{gap:10px;padding:13px 0}
  .health-item-icon{width:35px;height:35px;border-radius:10px}
  .health-state{font-size:9px;padding:6px 7px}
  .health-item>span:nth-child(2) strong{font-size:11.5px}
  .health-item>span:nth-child(2) small{font-size:9.5px}
  #call-overlay{display:flex;align-items:center;justify-content:center;padding:18px!important}
  #call-overlay[hidden]{display:none!important}
  #call-overlay .call-screen{width:min(100%,410px);max-width:410px;min-height:min(78svh,690px);height:auto;border-radius:30px;border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 74px rgba(0,0,0,.45);padding:12px 22px 24px;display:flex;flex-direction:column}
  #call-overlay .call-head{padding:10px 0 3px}
  #call-overlay .call-center{margin:25px auto 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px}
  #call-overlay .call-avatar-large{width:77px;height:77px;margin-bottom:20px}
  #call-overlay .call-center h2{font-size:26px}
  #call-overlay .call-bottom{padding-bottom:5px}
  #call-overlay .call-buttons{gap:26px;margin-bottom:22px}
  #call-overlay .end-call{width:100%;height:53px}
  html[data-theme="dark"] #page-dialer .dialer-panel{background:#161f2d!important;border:1px solid #2c394b!important;box-shadow:none!important}
  html[data-theme="dark"] #page-dialer .line-picker{background:#202b3b!important;border:1px solid #334257!important}
  html[data-theme="dark"] #page-dialer .line-picker-icon{background:#263347;border-color:#384a62;color:#e5eefc}
  html[data-theme="dark"] #page-dialer .number-field input{color:#f1f5fa}
  html[data-theme="dark"] #page-dialer .key strong{color:#f5f7fd}
  html[data-theme="dark"] #page-dialer .key small{color:#adbfd3}
}
@media(max-width:375px){#page-dialer .key{width:61px;height:61px;min-width:61px}#page-dialer .keypad{row-gap:9px;column-gap:9px}}