#collab-sync-status {
  position: fixed;
  z-index: 120;
  top: 66px;
  left: 50%;
  min-width: 132px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid #cdcdcd;
  border-radius: 140px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / 10%);
  color: #545454;
  font: 500 13px/1 "Inter", Arial, sans-serif;
  transform: translateX(-50%);
}
#collab-sync-status[data-status="failed"] { border-color: #ff8f8f; background: #fff3f3; color: #bd2424; }

#collab-header-presence { position: relative; z-index: 3; display: flex; align-items: center; }
.collab-header-stack { min-width: 30px; height: 30px; display: flex; align-items: center; padding: 0 4px; border: 0; border-radius: 140px; background: #f5f5f5; cursor: pointer; }
.collab-header-stack .collab-avatar { width: 24px; min-width: 24px; height: 24px; margin-left: -7px; border-color: #fff; background: var(--collab-user-color, #b316ab); }
.collab-header-stack .collab-avatar:first-child { margin-left: 0; }
.collab-header-count { margin: 0 4px; color: #646464; font: 500 11px/1 "Inter", Arial, sans-serif; }
.collab-header-details { position: absolute; top: 36px; right: 0; min-width: 188px; display: none; padding: 9px 11px; border: 1px solid #e3e3e3; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgb(0 0 0 / 12%); }
.collab-header-details span { display: block; color: var(--collab-user-color); font: 500 12px/18px "Inter", Arial, sans-serif; white-space: nowrap; }
#collab-header-presence.is-expanded .collab-header-details { display: block; }

#collab-presence-layer { position: fixed; z-index: 108; inset: 0; overflow: hidden; pointer-events: none; }
.collab-presence-group { position: fixed; z-index: 2; max-width: calc(100vw - 16px); display: flex; align-items: flex-start; gap: 7px; overflow-x: auto; padding: 0 1px 1px; pointer-events: auto; scrollbar-width: none; transition: transform 150ms ease; }
.collab-presence-group::-webkit-scrollbar { display: none; }
.collab-block-line { width: 1px; min-width: 1px; margin: 0 0 0 14px; background: var(--collab-user-color); opacity: .72; pointer-events: none; }
.collab-user-pill { --collab-user-color: #b316ab; min-width: 35px; width: 35px; height: 35px; display: inline-flex; flex: 0 0 auto; align-items: center; margin-left: -22px; padding: 2px; overflow: hidden; border: 1px solid var(--collab-user-color); border-radius: 140px; background: color-mix(in srgb, var(--collab-user-color) 10%, #fff); color: var(--collab-user-color); transition: width 160ms ease, min-width 160ms ease, padding 160ms ease; }
.collab-user-pill + .collab-user-pill { margin-left: 0; }
.collab-avatar { width: 29px; min-width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden; border: 1px solid #fff; border-radius: 50%; background: var(--collab-user-color, #b316ab); color: #fff; font: 600 10px/1 "Inter", Arial, sans-serif; object-fit: cover; }
.collab-user-name { max-width: 0; height: 19px; margin-left: 0; overflow: hidden; opacity: 0; font: 500 16px/19px "Inter", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; transition: max-width 160ms ease, margin-left 160ms ease, opacity 120ms ease; }
.collab-presence-group[data-expanded="true"] .collab-user-pill { min-width: 147px; width: max-content; padding-right: 12px; }
.collab-presence-group[data-expanded="true"] .collab-user-name { max-width: min(240px, 30vw); margin-left: 7px; opacity: 1; }
.collab-presence-count { min-width: 28px; height: 28px; display: grid; place-items: center; margin: 4px 0 0 -5px; border-radius: 140px; background: #f5f5f5; color: #606060; font: 500 12px/1 "Inter", Arial, sans-serif; white-space: nowrap; }
.collab-expand-hint { width: 18px; height: 18px; display: grid; place-items: center; margin: 8px 0 0 -7px; border: 1px solid #d7d7d7; border-radius: 50%; background: #fff; color: #686868; font: 500 12px/1 "Inter", Arial, sans-serif; pointer-events: none; }
.is-remotely-edited { border-radius: 5px !important; background: color-mix(in srgb, var(--collab-field-color, #b316ab) 8%, #fff) !important; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--collab-field-color, #b316ab) 70%, transparent); }
.collab-selection-marker { position: fixed; z-index: 1; border-radius: 2px; background: color-mix(in srgb, var(--collab-user-color) 26%, transparent); pointer-events: none; }
.collab-caret-marker { position: fixed; z-index: 1; width: 2px; border-radius: 2px; background: var(--collab-user-color); pointer-events: none; }
.is-collab-control-locked { cursor: not-allowed; }
.is-collab-control-locked [contenteditable="false"] { cursor: not-allowed; }

#collab-control-menu { position: fixed; z-index: 125; width: min(350px, calc(100vw - 24px)); padding: 8px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 18px; background: #1e1e1e; box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
#collab-control-menu button { width: 100%; min-height: 28px; display: flex; align-items: center; padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: 500 13px/20px "Inter", Arial, sans-serif; text-align: left; white-space: nowrap; }
#collab-control-menu button:hover, #collab-control-menu button:focus-visible { background: rgb(255 255 255 / 9%); outline: 0; }

.collab-control-notification { position: fixed; z-index: 130; top: 76px; right: 24px; width: min(330px, calc(100vw - 32px)); padding: 15px; border: 1px solid #d8d8d8; border-radius: 18px; background: #fff; box-shadow: 0 14px 38px rgb(0 0 0 / 16%); }
.collab-control-notification p { margin: 0; font: 400 14px/20px "Inter", Arial, sans-serif; }
.collab-control-notification p strong { color: #b316ab; font-weight: 500; }
.collab-control-notification div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.collab-control-notification button { height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: #ededed; font: 500 13px/1 "Inter", Arial, sans-serif; }
.collab-control-notification button[data-answer="approve"] { background: #588bff; color: #fff; }

@media (max-width: 760px) {
  #collab-sync-status { top: 64px; max-width: calc(100vw - 32px); }
  #collab-header-presence { position: fixed; top: 65px; left: 50%; z-index: 114; transform: translateX(-50%); }
  .collab-header-details { right: 50%; transform: translateX(50%); }
  .collab-presence-group { max-width: calc(100vw - 8px) !important; }
  .collab-presence-group[data-expanded="true"] .collab-user-name { max-width: 170px; }
  .collab-control-notification { top: 104px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .collab-presence-group { transition: none; }
}