#employees-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent; z-index: 2; display: flex; flex-direction: column; }

.employees-content { flex: 1; padding: 12px 16px; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none; }
.employees-content::-webkit-scrollbar { display: none; }

.employees-search { margin-bottom:10px; }
.employees-search input { width:100%; height:48px; padding:0 14px; border:1px solid #29313d; border-radius:10px; outline:0; background:#11151d; color:#f5f7fa; font:14px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.employees-search input::placeholder { color:#596575; }
.employees-search input:focus { border-color:#0f5bff; box-shadow:0 0 0 3px rgba(15,91,255,.16); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.employees-toggle { display:flex; gap:6px; margin:10px 0 8px; }

.toggle-btn { flex:1; min-height:36px; padding:0 6px; border:1px solid #29313d; border-radius:8px; background:transparent; color:#8e99a8;
  font:700 11px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; cursor:pointer; transition:border-color 150ms ease; }
.toggle-btn.active { border-color:#0f5bff; background:#0f5bff; color:#fff; }

.employee-group { margin-bottom:18px; }

.employee-group-title { margin:0 0 7px; padding:0; border:0; color:#0f5bff;
  font:700 12px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.1em; }

.employee-group-list { display:flex; flex-direction:column; gap:6px; }

.employee-item { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:11px; width:100%; padding:9px;
  background:#11151d; border:1px solid #29313d; border-radius:11px; color:#f5f7fa; cursor:pointer; transition:border-color 150ms ease;
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.employee-item:hover, .employee-item:focus-visible { border-color:#0f5bff; }

.employee-item-photo-container { position: relative; margin-right: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; width:42px; height:42px; margin:0; }

.employee-item-photo, .employee-item-photo-placeholder { width:42px; height:42px;
  border-radius: 10px; border: 1px solid #000; }
.employee-item-photo { object-fit: cover; object-position: center; }
.employee-item-photo-placeholder { background: linear-gradient(145deg,#666,#888);
  display: flex; align-items: center; justify-content: center; color:#b9ceff; font-size:12px; font-weight:700; }

.employee-item-info { flex: 1; min-width: 0; }

.employee-marquee { display: block; overflow: hidden; white-space: nowrap; }
.employee-marquee > span { display: inline-block; width:max-content; white-space: nowrap; }
.employee-marquee.is-marquee > span { animation: employeeMarquee var(--marquee-duration) ease-in-out .6s infinite; }
.employee-item-name { color:#f5f7fa; font-size:13px; font-weight:700; }
.employee-item-meta { margin-top:4px; color:#8e99a8; font-size:11px; }
.employee-item-arrow { color:#0f5bff; font-size:14px; }
.employee-status { color:#8e99a8; }
.employee-status i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; vertical-align:1px; }
.employee-status-newbie i { background:#0f5bff; }
.employee-status-birthday i { background:#0f5bff; }
.employee-status-separator { color:#596575; }

@keyframes employeeMarquee {
  0%, 15% { transform: translateX(0); }
  45%, 75% { transform: translateX(calc(-1 * var(--marquee-distance))); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .employee-marquee.is-marquee > span { animation: none; }
}

@media (min-width: 768px) {
  #employees-screen { width: 100%; max-width: 400px; margin: 0 auto;
    left: 50%; transform: translateX(-50%); }
}