.viewing-employee{--view-as-height:57px}
.view-as-banner{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;min-height:57px;padding:8px 24px;background:#edf3ef;border-bottom:1px solid #d4e0d8;color:#345846}
.view-as-context{display:flex;align-items:center;gap:8px;flex:none;font-size:12px;line-height:1.4;color:#536e5c;white-space:nowrap}
.view-as-context svg{color:#50765e}
.view-as-person{position:relative;display:flex;align-items:center;gap:9px;width:270px;min-width:0;height:40px;margin:0;padding:5px 10px 5px 6px;background:#fff;border:1px solid #d7e2db;border-radius:9px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.view-as-person:hover{border-color:#93b29f}.view-as-person:focus-within{outline:2px solid #428d70;outline-offset:2px}
.view-as-avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:6px;background:#e5eee7;color:#315d45;font-size:10px;font-weight:650;letter-spacing:.2px}
.view-as-person-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;line-height:1.4;color:#244936}
.view-as-chevron{flex:none;color:#698373}
.view-as-person select{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-width:0;margin:0;padding:0;opacity:0;cursor:pointer}
.view-as-person:has(select:disabled){opacity:.65;cursor:default}.view-as-person select:disabled{cursor:default}
.view-as-readonly{display:flex;align-items:center;gap:6px;flex:none;font-size:11px;line-height:1.4;white-space:nowrap;color:#536e5c}
.view-as-exit{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;margin-left:auto;min-height:34px;padding:7px 11px;border:1px solid #ccdad1;border-radius:8px;background:#f8fbf9;color:#3d604b;font-size:12px;font-weight:550;line-height:1.4;white-space:nowrap}
.view-as-exit:hover{background:#fff;border-color:#95b1a0;color:#065f46}
.view-as-error{flex-basis:100%;margin:0;font-size:12px;color:#a33535}.view-as-banner:has(.view-as-error){flex-wrap:wrap}
.viewing-employee .shell{min-height:calc(100dvh - var(--view-as-height))}
.viewing-employee .sidebar{top:var(--view-as-height);height:calc(100dvh - var(--view-as-height))}
.employee-view{font-size:12px;white-space:normal;text-align:left}
@media(min-width:641px) and (max-width:1000px){.view-as-banner{gap:12px;padding-inline:16px}.view-as-person{width:240px}.view-as-exit span{display:none}.view-as-exit{width:36px;padding:8px}}
@media(max-width:640px){
 .viewing-employee{--view-as-height:89px}
 .view-as-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;min-height:89px;padding:9px 14px}
 .view-as-context{grid-column:1;grid-row:1;font-size:11px;gap:6px}.view-as-context svg{width:15px;height:15px}
 .view-as-readonly{grid-column:2;grid-row:1;font-size:10px;justify-self:end;gap:4px}.view-as-readonly svg{width:11px;height:11px}
 .view-as-person{grid-column:1;grid-row:2;width:100%;height:40px}.view-as-person-name{font-size:13px}
 .view-as-exit{grid-column:2;grid-row:2;width:40px;height:40px;min-height:40px;margin:0;justify-self:end;padding:10px}.view-as-exit span{display:none}
 .view-as-error{grid-column:1/-1;font-size:11px}
 .viewing-employee .sidebar{top:auto;height:calc(66px + env(safe-area-inset-bottom))}
 .viewing-employee.mobile-chat #app{top:calc(var(--crm-vtop,0px) + var(--view-as-height));height:calc(var(--crm-vh,100dvh) - var(--view-as-height))}
 .viewing-employee.mobile-chat .shell{min-height:0}
}