/* Shared glass controls for internal calls and the business phone. */
.connection-drawer{--connection-line:color-mix(in srgb,var(--border) 72%,#4dc6ce 28%);width:min(620px,100vw);background:linear-gradient(130deg,#20898d1a,transparent 60%),color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(36px) saturate(135%);-webkit-backdrop-filter:blur(36px) saturate(135%);border-left:1px solid var(--connection-line);box-shadow:-24px 0 80px #00141d70,inset 1px 0 #b5fbff0c;border-radius:22px 0 0 22px}.connection-drawer>header{padding:24px 28px 18px;border:0}.connection-drawer>header h2{font-size:29px;letter-spacing:-.6px}.connection-drawer>header .home-close{background:none;border:0;box-shadow:none;font-size:29px;width:33px;height:33px;min-height:0;padding:0;color:var(--muted)}.connection-drawer #header-comm-body{padding:0 28px 24px;scrollbar-width:thin;overscroll-behavior:contain}.connection-drawer .header-connection-tabs{margin-bottom:19px;border-color:var(--connection-line);padding:3px;border-radius:13px;background:#003a4312;gap:4px;position:sticky;top:0;z-index:6;backdrop-filter:blur(30px)}.connection-drawer .header-connection-tabs button{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:550;padding:13px 8px;border-radius:10px;min-height:47px}.connection-drawer .header-connection-tabs button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #edcd77;background:linear-gradient(120deg,#e8c27115,#67b7bd08);color:#efd384}.connection-drawer .header-connection-tabs svg{width:21px;height:21px}
.connection-search{display:flex;align-items:center;gap:12px;border:1px solid var(--connection-line);border-radius:12px;padding:0 16px;background:linear-gradient(115deg,#5cbcc60b,#001c2317);box-shadow:inset 0 1px #fff00003}.connection-search svg{color:var(--muted);width:20px;height:20px}.connection-search input{border:0!important;background:none!important;box-shadow:none!important;outline:0;min-width:0;flex:1;padding:15px 0!important;font-size:13px}.connection-search:focus-within{border-color:#62bdc8;box-shadow:0 0 0 2px #62bdc812}.connection-filters{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:8px;margin:13px 0 22px}.connection-filters>button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--connection-line);border-radius:9px;background:#619ca207;box-shadow:inset 0 1px #fff00003;color:var(--muted);font-size:11px;min-height:38px;padding:9px 10px}.connection-filters>button svg{width:16px;height:16px}.connection-filters>button[aria-pressed=true]{color:#182d2f;background:linear-gradient(125deg,#f9d889,#edbf68);border-color:#f4d688;box-shadow:inset 0 1px #fff5,0 2px 9px #f2c56613}.connection-role{min-width:0;display:flex;align-items:stretch}.connection-role select{width:100%;min-width:0;font-size:11px;padding:7px 22px 7px 10px;border-color:var(--connection-line);border-radius:9px;background-color:transparent;color:var(--muted)}.connection-list-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);margin:0 2px 11px;gap:8px}.connection-list-heading>span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.connection-list-heading small{font-size:11px}.connection-list-heading small::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#48d49d;margin-left:8px;box-shadow:0 0 9px #48d49d33}
.connection-person{position:relative;display:grid;grid-template-columns:43px minmax(0,1fr) auto 39px 23px;align-items:center;gap:12px;border:1px solid var(--connection-line);border-radius:12px;background:linear-gradient(110deg,#5bb1b80c,#00424b0c);padding:10px 12px;margin-bottom:6px;box-shadow:inset 0 1px #efffff04;min-height:70px;transition:background .15s,border-color .15s}.connection-person:hover{border-color:#459aa76b;background:linear-gradient(110deg,#5bb1b81a,#00424b16)}.connection-person .im-avatar{height:43px;width:43px}.connection-person .im-avatar i{width:10px;height:10px;right:-1px;bottom:0;border:2px solid var(--panel)}.connection-person-name{min-width:0}.connection-person-name strong{display:block;font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.connection-person-name small{display:block;font-size:10px;color:var(--muted);line-height:1.45;margin-top:2px}.connection-presence{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 8px;font-size:10px;white-space:nowrap;letter-spacing:.1px;border:1px solid #879ba32f;background:#879ba30c;color:var(--muted)}.connection-presence i{width:6px;height:6px;border-radius:50%;background:#95a6af;flex:none}.connection-presence.is-online{color:#5bddad;background:#28d48a09;border-color:#28d48a2b}.connection-presence.is-online i{background:#48d499;box-shadow:0 0 7px #48d49922}.connection-call{width:39px;height:39px;min-height:39px;display:grid;place-items:center;padding:9px;border:1px solid var(--connection-line);border-radius:11px;color:var(--text);background:linear-gradient(120deg,#6dc1ce15,#3f9caa08);box-shadow:inset 0 1px #fff00007;flex:none}.connection-call svg{width:20px;height:20px}.connection-call:hover{border-color:#5dced5;color:#73e6d4;background:#4ac9ba15}.connection-more{position:relative}.connection-more>summary{display:grid;place-items:center;list-style:none;width:23px;height:34px;color:var(--muted);cursor:pointer}.connection-more>summary::marker,.connection-more>summary::-webkit-details-marker{display:none}.connection-more>summary svg{width:17px;height:17px}.connection-more>div{position:absolute;top:35px;right:0;z-index:10;width:205px;background:var(--panel);border:1px solid var(--connection-line);padding:5px;border-radius:10px;box-shadow:0 10px 40px #00141d70}.connection-more button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 8px;border:0;box-shadow:none;background:none;border-radius:7px;font-size:11px;text-align:left;color:var(--text)}.connection-more button svg{width:16px;height:16px}.connection-more button:hover{background:var(--soft)}.connection-person:has(.connection-more[open]){z-index:12}.connection-empty{color:var(--muted);font-size:12px;line-height:1.7;text-align:center;padding:25px 12px;margin:0}
.connection-phone-pad{--connection-line:color-mix(in srgb,var(--border) 72%,#4dc6ce 28%)}.connection-phone-line{display:flex;align-items:center;gap:13px;border:1px solid var(--connection-line);border-radius:13px;padding:13px;background:linear-gradient(115deg,#42c9a90a,#00424b0c);box-shadow:inset 0 1px #fff00005;margin-bottom:21px}.connection-phone-line>img{width:58px;height:58px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 10px #00bb8a10)}.connection-phone-line>div{flex:1;min-width:0}.connection-phone-line strong{font-size:14px;display:block;font-weight:600;line-height:1.5}.connection-phone-line>div>span{display:flex;align-items:center;gap:8px;color:var(--muted);margin-top:4px}.connection-phone-line small{font-size:11px}.connection-phone-line i{width:7px;height:7px;border-radius:50%;background:#8a9aa2;flex:none}.connection-phone-line i.is-ready{background:#42dca1;box-shadow:0 0 9px #42dca155}.connection-phone-line>button{font-size:11px;padding:10px 13px;min-height:36px;background:#69b9c407;border:1px solid var(--connection-line);box-shadow:inset 0 1px #fff00005;border-radius:10px}.connection-dial-form>label{font-size:12px;color:var(--muted);display:block;margin-bottom:8px}.connection-number{display:flex;align-items:center;border:1px solid var(--connection-line);border-radius:11px;background:linear-gradient(120deg,#5bb1b80a,#001c2317);overflow:hidden}.connection-number>span{font-size:21px;border-right:1px solid var(--connection-line);padding:16px 17px}.connection-number input,.connection-drawer .connection-number input{width:100%;flex:1;min-width:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;font-size:23px;padding:14px!important;letter-spacing:.5px;outline:0;margin:0}.connection-number:focus-within{border-color:#54bcc4;box-shadow:0 0 0 2px #54bcc410}.connection-number>button{display:grid;place-items:center;width:34px;height:34px;padding:8px;margin-right:9px;border:0;box-shadow:none;border-radius:50%;background:#9ac9d117;color:var(--muted)}.connection-number>button svg{width:16px;height:16px}.connection-number-tools{display:flex;align-items:center;gap:8px;margin:11px 0 13px}.connection-number-tools>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;font-size:11px;padding:8px 12px;background:linear-gradient(120deg,#6dc1ce0a,#3f9caa05);border:1px solid var(--connection-line);border-radius:9px;box-shadow:inset 0 1px #fff00005;color:var(--text)}.connection-number-tools>button svg{width:15px;height:15px}.connection-number-tools>label{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}.connection-number-tools input{width:13px;height:13px;min-height:0;padding:0;margin:0;accent-color:#eec86e}.connection-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.connection-keypad button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:1px solid var(--connection-line);border-radius:11px;background:linear-gradient(125deg,#7abfc411,#0038410a);box-shadow:inset 0 1px #ffffff07;color:var(--text);padding:9px;min-height:58px;transition:background .12s,transform .12s}.connection-keypad button>span{font-size:24px;line-height:1.15;font-weight:550}.connection-keypad button>small{font-size:8px;letter-spacing:3px;color:var(--muted);line-height:1.3}.connection-keypad button:hover{background:#6bbcc41b;border-color:#56aebb88}.connection-keypad button:active{transform:scale(.97)}.connection-dial-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font-size:14px;min-height:45px;padding:12px;margin-top:14px;border-radius:10px;background:linear-gradient(115deg,#f7d382,#edbf6c)!important;border:1px solid #f2d088!important;color:#183033!important;box-shadow:inset 0 1px #fff6,0 4px 18px #f1c36412}.connection-dial-submit svg{width:22px;height:22px}.connection-dial-submit:disabled{opacity:.45;cursor:not-allowed}.connection-dial-form>.error{font-size:11px;margin:9px 0 0;line-height:1.6}.connection-dial-form>.error:empty{display:none}.connection-recent{margin-top:22px;border-top:1px solid var(--connection-line);padding-top:17px}.connection-recent>header{display:flex;align-items:center;gap:10px;margin-bottom:13px}.connection-recent h3{font-size:15px;margin:0;flex:1}.connection-recent>header a{font-size:11px;color:#eaca75}.connection-recent>header button{font-size:20px!important;line-height:1;padding:0 3px}.connection-recent-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--connection-line);border-radius:11px;background:linear-gradient(120deg,#64bdc40b,#0038410b);margin-top:6px;min-width:0}.connection-call-direction{display:grid;place-items:center;height:35px;width:35px;flex:none;border:1px solid #65d9c62b;background:#1a9f8510;border-radius:50%;font-size:24px;color:#50dca5}.connection-call-direction.is-incoming{color:#65c7e6;background:#65c7e610}.connection-call-direction.is-missed{color:#ec8581;background:#ec858110;border-color:#ec858128}.connection-recent-row>div{flex:1;min-width:0}.connection-recent-row strong{display:block;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.connection-recent-row small{display:block;font-size:10px;color:var(--muted);line-height:1.6}.connection-recent-row time{font-size:10px;color:var(--muted);max-width:85px;text-align:right;line-height:1.6}.connection-recent-row .connection-call{width:34px;height:34px;min-height:34px;padding:7px;border-radius:50%}.telephone-layout .telephone-dialer{padding:20px;background:linear-gradient(140deg,#55aaa311,#002f3e12),color-mix(in srgb,var(--panel) 74%,transparent);backdrop-filter:blur(25px);border-radius:16px}.telephone-layout .telephone-history-row,.telephone-layout .telephone-filter{background:linear-gradient(125deg,#65b7bd0c,#002f3e0b),color-mix(in srgb,var(--panel) 74%,transparent);backdrop-filter:blur(20px);border-radius:12px}.telephone-layout .telephone-history-row{box-shadow:inset 0 1px #fff00005}.connection-drawer .telephone-current{margin:16px 0 0;border-radius:12px;background:#49adbe0b}
@media(max-width:520px){.connection-drawer{border-radius:0}.connection-drawer>header{padding:19px 17px 15px}.connection-drawer #header-comm-body{padding:0 15px 20px}.connection-drawer>header h2{font-size:25px}.connection-filters{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}.connection-role{grid-column:1/-1}.connection-role select{min-height:34px}.connection-person{grid-template-columns:36px minmax(0,1fr) 33px 20px;gap:9px;padding:10px;min-height:75px}.connection-person .im-avatar{width:36px;height:36px;grid-row:1/3}.connection-person-name{grid-column:2;grid-row:1}.connection-person-name strong{font-size:12px}.connection-person-name small{font-size:9px}.connection-person .connection-presence{grid-row:2;grid-column:2;justify-self:start;padding:1px 0;border:0;background:none;font-size:9px;margin-top:-5px}.connection-person>.connection-call{grid-column:3;grid-row:1/3;width:33px;height:35px;min-height:35px;padding:7px}.connection-person>.connection-more{grid-column:4;grid-row:1/3}.connection-phone-line{gap:9px;padding:10px}.connection-phone-line>img{width:46px;height:46px}.connection-phone-line strong{font-size:12px}.connection-phone-line small{font-size:10px}.connection-number>span{padding:14px 10px;font-size:18px}.connection-number input,.connection-drawer .connection-number input{font-size:20px;padding:13px 10px!important}.connection-number-tools{flex-wrap:wrap}.connection-number-tools>label{font-size:9px}.connection-number-tools>button{font-size:10px;padding:7px 8px}.connection-keypad button{min-height:53px;padding:7px}.connection-recent-row{gap:8px;padding:10px}.connection-recent-row time{max-width:65px;font-size:9px}.connection-recent-row strong{font-size:11px}.connection-recent-row small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.connection-person,.connection-keypad button{transition:none}}
.telephone-layout{grid-template-columns:minmax(340px,390px) minmax(0,1fr)}
@media(max-width:1100px){.telephone-layout{grid-template-columns:320px minmax(0,1fr)}.telephone-layout .connection-phone-line{flex-wrap:wrap}.telephone-layout .connection-phone-line>button{margin-left:auto}.telephone-layout .connection-number-tools{flex-wrap:wrap}.telephone-layout .connection-number-tools>label{margin-left:0}}
@media(max-width:800px){.telephone-layout{grid-template-columns:1fr}.telephone-layout .telephone-dialer{position:static}.telephone-layout .connection-keypad button{min-height:50px}}
#header-phone-dial.connection-dial-form{display:block;margin:0}
.telephone-layout .telephone-history-row{margin:0;padding:14px}.telephone-layout .telephone-history{gap:9px}.telephone-layout .telephone-direction{background:#2ac39e0c;border:1px solid #2ac39e33;color:#67d6b8;border-radius:50%}.telephone-layout .telephone-direction.out{background:#5bc0d90b;border-color:#5bc0d933;color:#77cde0}.telephone-layout .telephone-direction.is-missed{color:#ed9290;background:#ed92900b;border-color:#ed929033}.telephone-layout .telephone-history-row .chat-tool{border-radius:50%;background:#60b5bf10;box-shadow:inset 0 1px #ffffff0a}
@media(max-width:520px){.connection-drawer .header-connection-tabs button{font-size:12px;gap:8px;white-space:nowrap;min-height:44px;padding:10px 7px}.connection-drawer .header-connection-tabs svg{width:18px;height:18px}}