/* End-user phone workspace. Loaded after the shared administration theme. */
.phone-body{--product-line:#e5ebf2;--product-text:#14243b;--product-blue:#3a72b8}
.phone-header{height:70px;padding:0 28px;background:#fff}
.phone-header .phone-brand{font-size:22px;gap:10px}.phone-brand small{display:none}
.phone-header .phone-logo{width:34px;height:34px;border-radius:10px;font-size:22px}
.header-actions{gap:20px}.header-actions button{border:0;background:transparent;font-size:12px}
.phone-workspace{grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 70px)}
.phone-sidebar{padding:30px 16px 22px;border-color:var(--product-line)}
.phone-sidebar nav{gap:7px}.phone-sidebar nav button{padding:14px 12px;font-size:13px;border-radius:9px}
.phone-sidebar nav button[aria-current=page]{background:#edf4fd;box-shadow:none;color:#285c9f}
.sidebar-account{padding:22px 8px 0}.sidebar-account label{margin-bottom:0}.sidebar-account select{font-size:11px}
.phone-main{padding:34px 36px;max-width:1800px}
.phone-page-heading{border:0;padding:0;margin:0 0 28px}.phone-page-heading h1{font-size:28px;letter-spacing:-.8px;margin:0}
.phone-layout{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
.directory-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:0;min-height:0}
.directory-toolbar .search-wrap{order:0;flex:1 1 220px;width:auto;max-width:none}
.directory-toolbar .search-wrap input{height:44px;font-size:13px;border-radius:9px;padding-left:15px;border-color:#dfe7f0}
.search-wrap:after{top:12px}
.directory-toolbar h2{order:2;flex-basis:100%;font-size:13px;color:#52677d;margin:8px 0 0}
.directory-views{order:1;padding:4px;border-radius:9px;background:#fff}
.phone-body .directory-views button{padding:8px 11px;border-radius:6px}
.presence-toolbar{border:0;padding:0;margin:0 0 24px;justify-content:flex-start;gap:10px}
.presence-toolbar select{background:#fff;border:1px solid #dfe7f0;border-radius:8px;color:#52677d;font-size:12px;min-width:130px;padding:9px 10px}
.phone-body #available-only{border:1px solid #cfe7da;color:#11734b;background:#fff;border-radius:8px;padding:9px 12px;font-size:12px}
.phone-body #available-only[aria-pressed=true]{background:#e3f5eb;border-color:#11734b}
#presence-summary{margin-left:auto;font-size:12px;color:#52677d}
.phone-directory{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px}
.phone-directory .person{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:13px;row-gap:0;min-height:158px;padding:22px 20px 17px;border:1px solid #e0e7ef;border-radius:13px;box-shadow:0 2px 3px #14243b02;background:#fff;transition:border-color .15s,box-shadow .15s}
.phone-directory .person:hover{border-color:#afc5df;box-shadow:0 5px 18px #14243b07}
.phone-directory .person>.person-avatar{grid-column:1;grid-row:1/3;width:46px;height:46px;font-size:17px;border-radius:50%}
.phone-directory .person>p{grid-column:2/4;grid-row:1;font-size:15px;line-height:1.4;margin:0 0 4px;align-self:end}
.phone-directory .person>small{grid-column:2/4;grid-row:2;font-size:12px;align-self:start}
.phone-directory .person .person-presence{grid-column:1/3;grid-row:3;align-self:end;justify-self:start;margin:18px 0 0;padding:5px 8px;font-size:12px;border:0;border-radius:5px;line-height:1.4}
.phone-directory .person>.person-call{grid-column:3;grid-row:3;align-self:end;display:flex;gap:6px;align-items:center;justify-content:center;width:auto;height:33px;min-width:62px;margin:18px 0 0;padding:7px 10px;border-radius:7px;background:#edf4fc;color:#285fa3;border:0;font-size:12px}
.phone-directory .person>.person-call:hover:not(:disabled){background:#3a72b8;color:#fff}
.phone-directory .person>.person-self{grid-column:3;grid-row:3;align-self:end;justify-self:end;margin:0;padding:8px 0;height:33px;font-size:11px}
.phone-directory[data-layout=list]{border:1px solid #e0e7ef;border-radius:12px;gap:0}
.phone-directory[data-layout=list] .person{grid-template-columns:44px minmax(0,1fr) 150px 66px;grid-template-rows:auto auto;min-height:90px;border:0;border-bottom:1px solid #e9eef4;border-radius:0;box-shadow:none;padding:18px 20px}
.phone-directory[data-layout=list] .person:last-child{border-bottom:0}
.phone-directory[data-layout=list] .person>p,.phone-directory[data-layout=list] .person>small{grid-column:2}
.phone-directory[data-layout=list] .person .person-presence{grid-column:3;grid-row:1/3;align-self:center;margin:0}
.phone-directory[data-layout=list] .person>.person-call,.phone-directory[data-layout=list] .person>.person-self{grid-column:4;grid-row:1/3;align-self:center;margin:0}
.dialler{position:sticky;top:24px;padding:24px;background:#fff;border:1px solid #dfe7f0;border-radius:16px;box-shadow:0 8px 32px #14243b05}
.phone-identity .eyebrow{font-size:9px;letter-spacing:1.4px;color:#61758a}.phone-identity h2{font-size:19px}
.connection-row{margin-top:12px}.connection-row p{font-size:11px}
.dialler[data-call=idle] .call-display:has(#call-state:empty){display:none}
.dialler[data-call=idle] .call-display{margin:8px 0 12px}
#disconnect{font-size:10px;margin-bottom:16px}
.number-field{border:0;border-bottom:1px solid #dfe7f0;border-radius:0;min-height:66px;margin-top:6px}
.number-field input{font-size:24px;letter-spacing:.5px;padding:16px 5px}
.keypad{gap:8px;margin:22px 0}.keypad button{height:54px;border-radius:10px;font-size:24px}.keypad button small{font-size:8px}
.phone-body .call-action{height:46px;border-radius:9px;font-size:14px}
.dialler:not([data-call=idle]){border:1px solid #a8c4e3;box-shadow:0 8px 32px #3a72b810}
.settings-card{padding:28px;border-radius:14px}.settings-card h2{font-size:22px;margin-top:0}
#phone-about{max-width:400px;width:calc(100% - 40px);padding:30px;border:1px solid #dfe7f0;border-radius:16px;color:#14243b;box-shadow:0 20px 80px #14243b25}
#phone-about::backdrop{background:#14243b45}#phone-about h2{font-size:22px}#phone-about p,#phone-about a{font-size:12px;line-height:1.7}
#phone-about .about-close{position:absolute;right:12px;top:8px;font-size:22px;background:none;border:0}
@media(min-width:1600px){.phone-main{padding:38px 42px}.phone-layout{grid-template-columns:minmax(0,1fr) 310px;gap:36px}}
@media(max-width:1200px){.phone-workspace{grid-template-columns:180px minmax(0,1fr)}.phone-main{padding:28px 24px}.phone-layout{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.dialler{padding:20px}.phone-directory{grid-template-columns:1fr}.phone-directory[data-layout=list] .person{grid-template-columns:44px minmax(0,1fr) 66px;grid-template-rows:auto auto auto}.phone-directory[data-layout=list] .person .person-presence{grid-column:1/3;grid-row:3;margin-top:14px}.phone-directory[data-layout=list] .person>.person-call,.phone-directory[data-layout=list] .person>.person-self{grid-column:3;grid-row:3;margin-top:14px}}
@media(max-width:800px){.phone-header{padding:0 16px;height:64px;min-height:64px}.header-actions{gap:8px}.header-actions button{padding:8px 6px}.phone-header .phone-brand{font-size:18px}.phone-workspace{display:block}.phone-sidebar{padding:8px 12px}.phone-sidebar nav button{font-size:10px;padding:11px 7px}.sidebar-account{padding:0;border:0}.phone-main{padding:24px 18px}.phone-page-heading{margin-bottom:22px}.phone-page-heading h1{font-size:25px}.phone-layout{grid-template-columns:1fr}.dialler{position:static;width:100%;max-width:420px;padding:24px}.phone-directory .person{min-height:150px}.presence-toolbar{gap:8px}#presence-summary{max-width:none;text-align:left;flex-basis:100%;margin:4px 0 0}.phone-header .phone-logo{width:30px;height:30px}.header-actions a{font-size:10px}}
@media(pointer:coarse){.phone-directory .person>.person-call{min-height:44px;min-width:70px}.phone-body .directory-views button{min-height:40px}}

.person[data-state=dnd]{border-color:#efb7b3}.person[data-state=dnd] .presence-label{color:#a12520}#voicemail-unread:not(:empty),#recent-unread:not(:empty){background:#EF3E33;color:white;border-radius:12px;padding:2px 7px;font-size:12px}

.person-presence[data-state=dnd]{background:#fff0ee;color:#a12520;border-color:#efb7b3}

@media(max-width:800px){.phone-sidebar{min-width:0;max-width:100%}.phone-sidebar nav{display:flex;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.phone-sidebar nav button{flex:0 0 auto;white-space:nowrap}.directory-toolbar{flex-direction:row;align-items:center}.directory-toolbar .search-wrap{flex:1 1 100%;width:100%;order:0}.directory-toolbar h2{order:1;flex-basis:auto}.directory-toolbar .directory-views{order:2;margin-left:auto}}

.recent-row.missed-unread{border-left:3px solid #EF3E33}.recent-row.missed-unread .recent-copy p{color:#ba241c}.recent-row.missed-unread>button:first-child{order:2}.recent-row.missed-unread .person-avatar{color:#ba241c;background:#fff0ef}

@media(max-width:600px){.recent-row{flex-wrap:wrap}.recent-row .recent-copy{flex:1 1 calc(100% - 80px)}.recent-row>button{flex:1 1 auto}}

.recent-toolbar{justify-content:flex-start;gap:12px}

#transfer-dialog{width:min(660px,calc(100vw - 32px));max-height:85vh;padding:28px;border:1px solid #dce5f2;border-radius:18px;color:#0c2232;background:white;box-shadow:0 20px 80px #0c223226}
#transfer-dialog::backdrop{background:#0c223240}#transfer-dialog label{display:grid;gap:8px}#transfer-dialog input{width:100%}.transfer-people{max-height:45vh;overflow:auto;margin-top:18px}.transfer-person{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid #e8eef5}.transfer-person>div{flex:1;min-width:0}.transfer-person small{display:block;color:#58708a;margin-top:5px}.transfer-person strong{overflow-wrap:anywhere}.transfer-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}@media(max-width:600px){.transfer-person{flex-wrap:wrap}.transfer-person>div{flex-basis:100%}#transfer-dialog{padding:20px}.transfer-actions{flex-wrap:wrap}}

/* Personal function keys remain beside the dialler on every workspace tab. */
#softphone-keys{margin-top:22px;padding-top:18px;border-top:1px solid #dce5ee}
.function-key-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.function-key-heading h2{font-size:15px;margin:0}.function-key-heading button{padding:4px 10px;font-size:12px}
.function-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:360px;overflow:auto}
.dialler .softphone-function-key{text-align:left;white-space:normal;min-height:66px;padding:10px;border:1px solid #d6dfe9;border-left:4px solid #8190a2;border-radius:8px;background:#f1f4f8;color:#42536b;display:flex;flex-direction:column;gap:5px;opacity:1}
.function-key-name{font-size:13px;font-weight:650;overflow-wrap:anywhere}.softphone-function-key small{font-size:11px;color:inherit}
.dialler .softphone-function-key[data-state=available],.dialler .softphone-function-key[data-state=connected]{background:#e4f6ed;color:#086843;border-color:#89d2b0}
.dialler .softphone-function-key[data-state=ringing]{background:#fff0bd;color:#875200;border-color:#e7b33d}
.dialler .softphone-function-key[data-state=on_call],.dialler .softphone-function-key[data-state=dnd]{background:#fde8e8;color:#aa2424;border-color:#e6a1a1}
.dialler .softphone-function-key[data-state=shortcut]{background:#eaf1ff;color:#2452a0;border-color:#abc4ed}
.softphone-function-key:enabled:hover{filter:brightness(.96)}.softphone-function-key:focus-visible{outline:3px solid #396bc2;outline-offset:2px}.function-key-empty{font-size:12px;color:#64748b}

/* Integrated phone console and sidecar function keys. */
@media(min-width:1100px){.phone-layout{grid-template-columns:minmax(0,1fr) 490px;gap:24px}}
.dialler{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;max-width:540px;width:100%;padding:20px}
.phone-console{min-width:0}.dialler #softphone-keys{margin:0;padding:0 0 0 16px;border-top:0;border-left:1px solid #dce5ee;min-width:0}
.function-key-heading h2{font-size:12px}.function-key-heading button{font-size:11px;padding:3px 6px}
.function-key-grid{grid-template-columns:1fr;gap:6px;max-height:580px}
.dialler .softphone-function-key{min-height:48px;border-left-width:5px;border-radius:5px;padding:7px 9px;gap:3px}
.function-key-name{font-size:12px}.softphone-function-key small{font-size:10px}
@media(min-width:801px) and (max-width:1099px){.phone-layout{grid-template-columns:1fr}.dialler{position:static}}
@media(max-width:800px){.dialler{max-width:540px;padding:14px;gap:12px;grid-template-columns:minmax(0,1fr) 132px}.dialler #softphone-keys{padding-left:10px}.function-key-heading{flex-wrap:wrap;gap:6px}.dialler .keypad button{min-width:0;padding-left:0;padding-right:0}.dialler .function-key-name{font-size:11px}}

.phone-workspace[data-tab=keypad] .dialler,.phone-workspace:not([data-call=idle]) .dialler{display:grid}

@media(max-width:800px){.phone-console #number{font-size:17px}.phone-console .number-field{gap:4px}}