/* A quiet header and an inline crew picker using the app's existing surfaces. */
#seafix-demo #sf-header-status-controls[hidden] { display:none!important; }
#seafix-demo .sf-observer-context:has(#sf-observer-banner[hidden]) { display:none; }
#seafix-demo .sf-top-actions { display:flex; margin-left:auto; gap:10px; }
#seafix-demo.sf-chat-view .sf-top-actions { display:flex; }
#seafix-demo .sf-top-actions #sf-logout { display:inline-flex; min-height:44px; }
#seafix-demo .sf-mobile-work-links { display:none; }
#seafix-demo .sf-participant-field { padding:0; border:0; margin:10px 0; }
#seafix-demo .sf-participant-field legend { padding:0; font-size:14px; font-weight:600; }
#seafix-demo .sf-participant-field>.sf-collab-note { margin:8px 0 12px; font-size:12px; }
#seafix-demo .sf-participant-picker { padding:14px; border:1px solid var(--sf-line); border-radius:16px; background:var(--sf-surface); }
#seafix-demo .sf-participant-picker [hidden] { display:none!important; }
#seafix-demo .sf-participant-picker-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#seafix-demo .sf-participant-count { color:var(--sf-muted); font-size:12px; font-variant-numeric:tabular-nums; }
#seafix-demo .sf-participant-picker .sf-participant-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin:0; padding:9px 12px; background:var(--sf-surface-raised); border:1px solid var(--sf-line); border-radius:10px; color:var(--sf-heading); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
#seafix-demo .sf-participant-toggle svg { width:16px!important; height:16px!important; flex:none; }
#seafix-demo .sf-participant-toggle svg:last-child { width:14px!important; height:14px!important; color:var(--sf-muted); transition:transform .18s; }
#seafix-demo .sf-participant-toggle[aria-expanded="true"] svg:last-child { transform:rotate(180deg); }
#seafix-demo .sf-participant-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
#seafix-demo .sf-participant-picker .sf-participant-chip { display:inline-flex; align-items:center; gap:7px; min-height:36px; max-width:100%; margin:0; padding:4px 9px 4px 4px; border:1px solid var(--sf-line); border-radius:999px; background:var(--sf-surface); color:var(--sf-heading); font:inherit; font-size:12px; font-weight:400; cursor:pointer; }
#seafix-demo .sf-participant-chip>span:nth-child(2) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#seafix-demo .sf-participant-chip>svg { flex:none; width:13px!important; height:13px!important; color:var(--sf-muted); }
#seafix-demo .sf-participant-initials { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; background:var(--sf-surface-raised); color:var(--sf-heading); font-size:11px; font-weight:600; text-transform:uppercase; }
#seafix-demo .sf-participant-chip .sf-participant-initials { width:26px; height:26px; border-radius:50%; font-size:10px; }
#seafix-demo .sf-participant-panel { margin-top:14px; padding-top:14px; border-top:1px solid var(--sf-line); }
#seafix-demo .sf-participant-picker .sf-participant-search { position:relative; display:block; padding:0; margin:0 0 8px; }
#seafix-demo .sf-participant-search>svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px!important; height:17px!important; color:var(--sf-muted); pointer-events:none; }
#seafix-demo :is(#sf-layover-participants-search,#sf-collab-participants-search) { box-sizing:border-box; width:100%; min-height:42px; margin:0; padding:11px 12px 11px 40px; border:1px solid var(--sf-line); border-radius:10px; background:var(--sf-surface-raised); color:var(--sf-text); font:inherit; font-size:12px; font-weight:400; }
#seafix-demo .sf-participant-options { display:grid; gap:3px; max-height:252px; overflow:auto; overscroll-behavior:contain; padding:3px; margin:0 -3px; }
#seafix-demo .sf-participant-options .sf-participant-person { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 21px; align-items:center; gap:12px; min-height:56px; margin:0; padding:9px 10px; border:1px solid transparent; border-radius:10px; cursor:pointer; }
#seafix-demo .sf-participant-person>input { position:absolute; width:1px; height:1px; min-height:0; opacity:0; margin:0; padding:0; }
#seafix-demo .sf-participant-person:has(input:checked) { background:var(--sf-surface-raised); border-color:var(--sf-line); }
#seafix-demo .sf-participant-person-copy { min-width:0; }
#seafix-demo .sf-participant-person-copy>strong { font-size:13px; font-weight:550; overflow-wrap:anywhere; }
#seafix-demo .sf-participant-person-copy>small { margin-top:3px; font-size:11px; color:var(--sf-muted); overflow-wrap:anywhere; }
#seafix-demo .sf-participant-mark { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--sf-line); border-radius:6px; background:var(--sf-surface); color:transparent; }
#seafix-demo .sf-participant-mark svg { width:14px!important; height:14px!important; stroke-width:2; }
#seafix-demo .sf-participant-person:has(input:checked) .sf-participant-mark { background:var(--sf-heading); border-color:var(--sf-heading); color:var(--sf-canvas); }
#seafix-demo .sf-participant-no-results { padding:18px 8px; margin:0; color:var(--sf-muted); text-align:center; font-size:12px; line-height:1.6; }
#seafix-demo :is(.sf-participant-toggle,.sf-participant-chip):focus-visible,#seafix-demo .sf-participant-person:has(input:focus-visible) { outline:2px solid var(--sf-heading); outline-offset:2px; }
@media(hover:hover) {
  #seafix-demo :is(.sf-participant-toggle,.sf-participant-chip,.sf-participant-person):hover { border-color:var(--sf-muted); }
}
@media(max-width:999px) {
  #seafix-demo .sf-mobile-work-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 20px; }
  #seafix-demo .sf-mobile-work-links button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:44px; padding:10px 6px; border:1px solid var(--sf-line); border-radius:11px; background:var(--sf-surface); color:var(--sf-heading); font:inherit; font-size:12px; cursor:pointer; }
  #seafix-demo .sf-mobile-work-links svg { flex:none; width:16px!important; height:16px!important; }
}
@media(max-width:759px) {
  #seafix-demo .sf-topbar { flex-wrap:wrap; row-gap:12px; }
  #seafix-demo .sf-top-actions,#seafix-demo.sf-chat-view .sf-top-actions { display:flex; flex:1 0 100%; justify-content:space-between; margin:0; gap:10px; }
  #seafix-demo .sf-top-actions #sf-logout { display:inline-flex; width:auto; min-width:0; min-height:40px; padding:8px 11px; }
  #seafix-demo .sf-top-actions #sf-logout>span { position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip-path:none; }
  #seafix-demo .sf-top-actions #sf-settings-back { min-height:40px; padding:8px 11px; font-size:12px; }
}
@media(max-width:380px) {
  #seafix-demo .sf-participant-picker { padding:11px; }
  #seafix-demo .sf-participant-picker-head { gap:8px; }
  #seafix-demo .sf-participant-toggle { gap:6px; padding-inline:9px; }
  #seafix-demo .sf-mobile-work-links button { font-size:11px; gap:5px; }
}
@media(prefers-reduced-motion:reduce) { #seafix-demo .sf-participant-toggle svg { transition:none; } }