/* Shared phone and desktop account navigation. */
#seafix-demo .sf-account-menu { display:none; }
#seafix-demo .sf-account-menu [hidden], #seafix-demo .sf-account-menu[hidden] { display:none!important; }
#seafix-demo #sf-account-menu-panel:focus { outline:none; }
@media(max-width:999px) {
  #seafix-demo .sf-topbar { flex-wrap:nowrap; align-items:center; gap:12px; }
  #seafix-demo .sf-topbar .sf-brand-area { flex:1 1 auto; min-width:0; gap:12px; }
  #seafix-demo .sf-topbar .sf-brand-lockup { flex:0 0 auto; margin-right:0; }
  #seafix-demo .sf-topbar .sf-top-actions { display:flex; flex:0 0 auto; width:auto; margin:0 0 0 auto; gap:2px; justify-content:flex-end; }
  #seafix-demo .sf-topbar .sf-top-actions > #sf-logout,
  #seafix-demo .sf-topbar #sf-settings-back,
  #seafix-demo .sf-topbar .sf-observer-context,
  #seafix-demo .sf-mobile-work-links { display:none!important; }
  #seafix-demo .sf-account-menu { display:block; position:static; flex:none; }
  #seafix-demo .sf-account-menu-toggle {
    display:grid; place-items:center; width:44px; height:44px; min-width:44px; margin:0; padding:0;
    border:0; border-radius:12px;
    background:transparent; color:var(--sf-heading); font:inherit;
    box-shadow:none; cursor:pointer;
    transition:background .15s,border-color .15s,box-shadow .15s;
  }
  #seafix-demo .sf-account-menu-toggle > svg { width:23px!important; height:23px!important; stroke-width:1.7; }
  #seafix-demo .sf-account-menu-toggle[aria-expanded="true"] { background:var(--sf-settings-selection); }
  #seafix-demo .sf-account-menu-panel {
    position:fixed; inset:var(--sf-viewport-top,0px) 0 auto auto; margin:0;
    display:flex; flex-direction:column; box-sizing:border-box;
    width:min(224px,calc(100vw - 24px)); max-width:none;
    height:var(--sf-viewport-height,100dvh); max-height:none;
    padding:max(10px,env(safe-area-inset-top,0px)) 10px max(12px,env(safe-area-inset-bottom,0px));
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y;
    border:0; border-left:1px solid var(--sf-settings-line); border-radius:0; background:var(--sf-canvas,var(--sf-page)); color:var(--sf-settings-ink);
    box-shadow:-14px 0 45px rgb(0 0 0 / .12); transform:translateX(0);
  }
  #seafix-demo .sf-account-menu-panel::backdrop { background:rgb(0 0 0 / .2); }
  #seafix-demo .sf-account-menu-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:6px; padding-left:7px; }
  #seafix-demo .sf-account-menu-heading > span { color:var(--sf-settings-muted); font-size:12px; font-weight:500; }
  #seafix-demo #sf-account-menu-close { display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:12px; background:var(--sf-surface-raised); color:var(--sf-heading); cursor:pointer; }
  #seafix-demo #sf-account-menu-close svg { width:20px!important; height:20px!important; }
  #seafix-demo .sf-account-menu-person { display:block; flex:none; margin:0 0 12px; padding:14px 7px 18px; border-bottom:1px solid var(--sf-settings-line); }
  #seafix-demo .sf-account-menu-person > div { min-width:0; }
  #seafix-demo .sf-account-menu-person strong { display:block; margin:0; color:var(--sf-settings-ink); font-size:14px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
  #seafix-demo .sf-account-menu-person small { display:block; margin-top:3px; color:var(--sf-settings-muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
  #seafix-demo .sf-account-menu-person small span { font-size:inherit; }
  #seafix-demo .sf-account-menu-nav { display:grid; flex:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-bottom:16px; }
  #seafix-demo .sf-account-menu-panel [data-go],
  #seafix-demo .sf-account-menu-footer #sf-logout {
    display:flex; align-items:center; justify-content:flex-start; gap:11px; width:100%; min-width:0; min-height:44px;
    margin:0; padding:10px 7px; border:0; border-radius:9px;
    background:transparent; color:var(--sf-settings-ink); font:inherit; font-size:13px; font-weight:450; line-height:1.4; text-align:left; white-space:normal; cursor:pointer;
  }
  #seafix-demo .sf-account-menu-nav :is([data-go],[data-side-action]) {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    min-width:0; min-height:75px; padding:7px 4px; border:1px solid var(--sf-line);
    border-radius:14px; background:var(--sf-surface); color:var(--sf-settings-ink);
    font:inherit; font-size:11px; font-weight:550; line-height:1.2; text-align:center;
    white-space:normal; overflow-wrap:anywhere; cursor:pointer;
  }
  #seafix-demo .sf-account-menu-nav :is([data-go],[data-side-action]) > span { position:static; width:auto; height:auto; margin:0; padding:0; font-size:inherit; line-height:inherit; clip-path:none; overflow:visible; }
  #seafix-demo .sf-account-menu-nav :is([data-go],[data-side-action]) > svg { flex:none; width:18px!important; height:18px!important; color:var(--sf-settings-muted); }
  #seafix-demo .sf-account-menu-panel [data-go] > span,
  #seafix-demo .sf-account-menu-footer #sf-logout > span { position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip-path:none; font-size:inherit; line-height:inherit; }
  #seafix-demo .sf-account-menu-panel [data-go] > svg,
  #seafix-demo .sf-account-menu-footer #sf-logout > svg { flex:none; width:18px!important; height:18px!important; color:var(--sf-settings-muted); stroke-width:1.7; }
  #seafix-demo .sf-account-menu-panel [data-go][aria-current="page"] { background:var(--sf-settings-selection); color:var(--sf-settings-ink); font-weight:600; }
  #seafix-demo .sf-account-menu-panel [data-go][aria-current="page"] > svg { color:inherit; }
  #seafix-demo .sf-account-menu-nav :is([data-go],[data-side-action])[aria-current="page"] {
    background:var(--sf-heading); color:var(--sf-canvas); border-color:var(--sf-heading);
  }
  #seafix-demo .sf-account-menu-footer { flex:none; margin:auto 0 0; padding-top:10px; border-top:1px solid var(--sf-settings-line); }
  #seafix-demo .sf-account-menu-footer #sf-logout,
  #seafix-demo .sf-account-menu-footer #sf-logout > svg { color:var(--sf-danger); }
  #seafix-demo .sf-account-menu-footer #sf-logout:disabled { opacity:.6; cursor:wait; }
  #seafix-demo .sf-account-menu-footer #sf-logout-message { position:static; margin:4px 0 0; max-width:none; padding:10px 12px; border:0; border-radius:10px; background:color-mix(in srgb,var(--sf-danger) 7%,transparent); font-size:12px; line-height:1.5; }
  #seafix-demo .sf-account-menu :is(button,[data-go]):focus-visible { outline:2px solid var(--sf-heading); outline-offset:2px; }
  @media(hover:hover) {
    #seafix-demo .sf-account-menu-panel [data-go]:hover:not([aria-current="page"]) { background:light-dark(#e9e9ee,#303036); }
    #seafix-demo .sf-account-menu-footer #sf-logout:hover { background:color-mix(in srgb,var(--sf-danger) 7%,transparent); color:var(--sf-danger); }
  }
}
@media(max-width:759px) {
  #seafix-demo .sf-account-menu-heading { display:contents; }
  #seafix-demo .sf-account-menu-heading > span { display:none; }
  #seafix-demo #sf-account-menu-close { position:absolute; z-index:5; top:max(10px,env(safe-area-inset-top,0px)); right:10px; }
  #seafix-demo .sf-account-menu-person { padding-top:12px; }
  #seafix-demo .sf-account-menu-person strong { padding-right:40px; min-height:22px; }
  #seafix-demo .sf-account-menu-panel [data-go],
  #seafix-demo .sf-account-menu-footer #sf-logout { min-height:46px; font-size:14px; }
}
@media(max-width:479px) {
  #seafix-demo .sf-topbar, #seafix-demo .sf-topbar .sf-brand-area { gap:8px; }
}
@media(max-width:370px) {
  #seafix-demo .sf-topbar, #seafix-demo .sf-topbar .sf-brand-area { gap:6px; }
}
@media(prefers-reduced-motion:reduce) { #seafix-demo .sf-account-menu-toggle { transition:none; } }

#seafix-demo #sf-notification-bell { position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:12px; background:transparent; color:var(--sf-heading); cursor:pointer; }
#seafix-demo #sf-notification-bell[hidden], #seafix-demo .sf-notification-badge[hidden] { display:none; }
#seafix-demo #sf-notification-bell > svg { width:23px!important; height:23px!important; stroke-width:1.7; }
#seafix-demo .sf-notification-badge { position:absolute; top:0; right:0; display:grid; place-items:center; min-width:18px; height:18px; box-sizing:border-box; padding:0 4px; border-radius:50%; background:var(--sf-danger,#c63d4c); color:light-dark(#fff,#15171b); font-size:10px; line-height:1; font-weight:650; }
#seafix-demo #sf-notification-bell:focus-visible, #seafix-demo #sf-account-menu-toggle:focus-visible { outline:2px solid var(--sf-heading); outline-offset:-2px; }
#seafix-demo.is-logged-out #sf-notification-bell { display:none; }
@media(max-width:759px) {
  #seafix-demo .sf-topbar { padding-right:max(0px,env(safe-area-inset-right,0px)); gap:4px; }
  #seafix-demo.sf-phone-header .sf-topbar .sf-brand-area { flex:1 1 auto; min-width:0; width:auto; }
  #seafix-demo.sf-phone-header .sf-topbar .sf-brand-lockup { flex:0 1 auto; min-width:0; }
  #seafix-demo.sf-phone-header .sf-topbar .sf-brand { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  #seafix-demo.sf-phone-header .sf-topbar .sf-crewchat-brand { flex:none; }
}
@media print { #seafix-demo .sf-account-menu { display:none!important; } }

/* The same two quiet header controls on every authenticated desktop page. */
@media screen and (min-width:1000px) {
  #seafix-demo:not(.is-logged-out) .sf-topbar #sf-settings-back { display:none!important; }
  #seafix-demo:not(.is-logged-out) .sf-topbar .sf-account-menu { display:block; position:static; flex:none; }
  #seafix-demo .sf-account-menu-toggle {
    display:grid; place-items:center; width:44px; height:44px; min-width:44px; margin:0; padding:0;
    border:0; border-radius:12px; background:transparent; color:var(--sf-heading); box-shadow:none;
  }
  #seafix-demo .sf-account-menu-toggle > svg { width:23px!important; height:23px!important; stroke-width:1.7; }
}

/* Keep the module next to the wordmark rather than at the end of a flex spacer. */
#seafix-demo .sf-topbar .sf-brand-lockup { flex:0 1 auto; }
#seafix-demo .sf-topbar .sf-brand-area { gap:6px; }

/* The approved monochrome drawer. IDs keep the same design in CrewChat. */
#seafix-demo {--sf-menu-paper:light-dark(#e9eaee,#2b2b2b);}
#seafix-demo #sf-account-menu-panel {
  --sf-menu-group-gap:18px;
  --sf-menu-ink:light-dark(#262626,#ededed);
  --sf-menu-muted:light-dark(#626262,#b7b7b7);
  --sf-menu-line:light-dark(#d0d0d0,#454545);
  --sf-menu-active:light-dark(#363636,#e7e7e7);
  --sf-menu-active-ink:light-dark(#fff,#262626);
  position:fixed; inset:calc(var(--sf-viewport-top,0px) + 12px) 12px auto auto; margin:0;
  display:flex; flex-direction:column; box-sizing:border-box;
  width:min(296px,calc(100vw - 24px)); max-width:none;
  height:calc(var(--sf-viewport-height,100dvh) - 24px); max-height:none;
  padding:12px 16px max(14px,env(safe-area-inset-bottom,0px));
  border:1px solid light-dark(#dce0e6,#414852); border-radius:18px;
  background:var(--sf-menu-paper); color:var(--sf-menu-ink);
  box-shadow:0 2px 4px light-dark(#2630440d,#00000020);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden; overscroll-behavior:contain; touch-action:pan-y;
}
#seafix-demo #sf-account-menu-panel[hidden] { display:none!important; }
#seafix-demo #sf-account-menu-panel::backdrop { background:rgb(0 0 0 / .18); }
#seafix-demo #sf-account-menu-panel .sf-account-menu-heading { display:flex; flex:none; justify-content:flex-end; align-items:center; padding:0; min-height:36px; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-heading > span { display:none; }
#seafix-demo #sf-account-menu-panel #sf-account-menu-close { position:static; display:grid; place-items:center; flex:none; width:40px; height:40px; margin:-4px -4px 0 0; padding:0; border:0; border-radius:10px; background:transparent; color:var(--sf-menu-muted); cursor:pointer; }
#seafix-demo #sf-account-menu-panel #sf-account-menu-close svg { width:19px!important; height:19px!important; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person { position:relative; display:flex; align-items:flex-start; flex:none; gap:13px; min-height:0; margin:0; padding:4px 3px 0; border:0; border-radius:0; background:transparent; overflow:visible; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person::after { content:none; }
#seafix-demo #sf-account-menu-panel .sf-menu-avatar { display:grid; place-items:center; flex:none; width:46px; height:46px; border:1px solid var(--sf-menu-line); border-radius:50%; background:light-dark(#dadada,#414141); color:var(--sf-menu-ink); font-size:15px; font-weight:600; letter-spacing:.3px; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person > div { min-width:0; flex:1; }
#seafix-demo #sf-account-menu-panel #sf-menu-name { display:block; min-height:0; margin:0; padding:0; color:var(--sf-menu-ink); font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
#seafix-demo #sf-account-menu-panel #sf-menu-name span { display:inline; white-space:normal; overflow:visible; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person small { display:block; margin-top:3px; color:var(--sf-menu-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person .sf-menu-vessel { display:flex; align-items:center; gap:5px; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-person .sf-menu-position { display:flex; align-items:center; gap:5px; }
#seafix-demo #sf-account-menu-panel #sf-menu-department-icon { display:flex; flex:none; align-items:center; }
#seafix-demo #sf-account-menu-panel #sf-menu-department-icon[hidden] { display:none; }
#seafix-demo #sf-account-menu-panel #sf-menu-department-icon svg { width:14px!important; height:14px!important; flex:none; }
#seafix-demo #sf-account-menu-panel .sf-menu-vessel svg { width:12px!important; height:12px!important; flex:none; stroke-width:1.6; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav { position:static; display:flex; flex:1 1 0; flex-direction:column; gap:var(--sf-menu-group-gap); min-height:0; margin-top:var(--sf-menu-group-gap); padding:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-gutter:stable; overscroll-behavior:contain; }
#seafix-demo #sf-account-menu-panel .sf-side-menu-sections { display:flex; flex:none; flex-direction:column; gap:var(--sf-menu-group-gap); min-height:0; overflow:visible; padding:0; }
#seafix-demo #sf-account-menu-panel .sf-side-menu-group { display:grid; gap:3px; }
#seafix-demo #sf-account-menu-panel .sf-side-menu-group-title { margin:0 0 4px; padding:0 11px; color:var(--sf-menu-muted); font-size:10px; font-weight:600; line-height:1.5; letter-spacing:1.3px; text-transform:uppercase; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav :is([data-go],[data-side-action]) { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-width:0; min-height:44px; margin:0; padding:10px 11px; border:0; border-radius:9px; background:transparent; color:var(--sf-menu-ink); font:inherit; font-size:13px; font-weight:450; line-height:1.4; text-align:left; white-space:normal; cursor:pointer; box-shadow:none; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav :is([data-go],[data-side-action]) > span { position:static; display:block; min-width:0; width:auto; height:auto; margin:0; padding:0; clip-path:none; overflow:visible; white-space:normal; overflow-wrap:anywhere; font:inherit; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav :is([data-go],[data-side-action]) > svg { flex:none; width:18px!important; height:18px!important; color:var(--sf-menu-muted); stroke-width:1.6; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav [aria-current="page"] { background:var(--sf-menu-active); color:var(--sf-menu-active-ink); font-weight:550; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav [aria-current="page"] > svg { color:inherit; }
#seafix-demo #sf-account-menu-panel .sf-side-menu-bottom { display:grid; flex:none; gap:3px; margin-top:0; padding-top:12px; border-top:1px solid var(--sf-menu-line); }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav [data-go="settings"] { margin-top:0; }
#seafix-demo #sf-account-menu-panel button:focus-visible { outline:2px solid var(--sf-menu-ink); outline-offset:2px; }
#seafix-demo #sf-account-menu-panel .sf-account-menu-nav button:focus-visible { outline-offset:-2px; }
#seafix-demo #sf-account-menu-toggle { cursor:pointer; }
@media(hover:hover) {
  #seafix-demo #sf-account-menu-panel :is(button,[data-go]):hover:not([aria-current="page"]) { background:light-dark(#dcdcdc,#383838); }
}
@media(min-width:1000px) {
  #seafix-demo .sf-account-menu-measure {
    position:fixed; left:-10000px; top:0; display:grid;
    width:100%; max-width:var(--sf-work-shell-width); box-sizing:border-box;
    padding-inline:var(--sf-page-gutter); grid-template-columns:var(--sf-work-columns);
    column-gap:12px; visibility:hidden; pointer-events:none;
  }
  #seafix-demo .sf-account-menu-measure > div { min-width:0; }
  #seafix-demo .sf-account-menu-measure > div:last-child { padding-inline:8px; }
  #seafix-demo .sf-account-menu-measure .sf-personal-photo { display:block; }
  #seafix-demo #sf-account-menu-dock {
    position:fixed; z-index:25; margin:0; padding:0; overflow:visible;
    clip-path:inset(-6px -6px -6px 0); pointer-events:none;
  }
  #seafix-demo #sf-account-menu-dock[hidden] { display:none!important; }
  #seafix-demo #sf-account-menu-panel {
    --sf-menu-group-gap:20px;
    position:relative; inset:auto; width:316px; height:724px;
    padding:29px 16px 17px;
    pointer-events:auto;
    scrollbar-width:thin;
  }
  #seafix-demo #sf-account-menu-panel::backdrop { background:transparent; }
  #seafix-demo #sf-account-menu-panel .sf-account-menu-heading { position:absolute; top:8px; right:9px; min-height:0; }
  #seafix-demo #sf-account-menu-panel #sf-account-menu-close { width:30px; height:30px; margin:0; border-radius:50%; }
  #seafix-demo #sf-account-menu-panel #sf-account-menu-close svg { width:15px!important; height:15px!important; stroke-width:1.6; }
  #seafix-demo #sf-account-menu-panel .sf-account-menu-person { gap:15px; margin:0; padding:0 8px; }
  #seafix-demo #sf-account-menu-panel .sf-menu-avatar { width:52px; height:52px; margin-top:2px; border:0; background:light-dark(#d0d0d0,#454545); font-size:17px; font-weight:500; }
  #seafix-demo #sf-account-menu-panel #sf-menu-name { padding-right:3px; font-size:18px; font-weight:500; letter-spacing:-.4px; line-height:1.25; }
  #seafix-demo #sf-account-menu-panel .sf-account-menu-person small { margin-top:5px; }
  #seafix-demo #sf-account-menu-panel .sf-menu-vessel { display:flex; align-items:center; gap:5px; }
  #seafix-demo #sf-account-menu-panel .sf-menu-vessel svg { width:12px!important; height:12px!important; flex:none; stroke-width:1.6; }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-group { gap:2px; }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-group-title { display:flex; align-items:center; gap:12px; margin:0 12px 8px; padding:0; font-size:11px; font-weight:500; letter-spacing:.65px; text-transform:none; }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-group-title::after { content:""; flex:1; height:1px; background:var(--sf-menu-line); }
  #seafix-demo #sf-account-menu-panel .sf-account-menu-nav :is([data-go],[data-side-action]) { min-height:35px; gap:11px; padding:8px 12px; border-radius:8px; font-weight:400; line-height:1.45; }
  #seafix-demo #sf-account-menu-panel .sf-account-menu-nav [aria-current="page"] { font-weight:500; }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-bottom { gap:2px; margin-top:0; padding-top:12px; }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-bottom button:not([aria-current="page"]) { color:var(--sf-menu-muted); }
  #seafix-demo #sf-account-menu-panel .sf-side-menu-bottom button::after { content:""; width:6px; height:6px; margin-left:auto; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); opacity:.7; }
  /* Short module columns keep their exact bounds; the complete menu scrolls. */
  #seafix-demo #sf-account-menu-panel.sf-menu-short { overflow-y:auto; }
  #seafix-demo #sf-account-menu-panel.sf-menu-short .sf-account-menu-nav { flex:none; overflow:visible; }
  #seafix-demo #sf-account-menu-panel.sf-menu-short .sf-side-menu-sections { flex:none; overflow:visible; }
}
@media(min-width:1000px) and (pointer:coarse) {
  #seafix-demo #sf-account-menu-panel #sf-account-menu-close { min-width:44px; min-height:44px; }
}
@media(max-width:999px) {
  #seafix-demo #sf-account-menu-panel { padding-top:max(12px,env(safe-area-inset-top,0px)); }
}
@media print { #seafix-demo :is(#sf-account-menu-panel,#sf-account-menu-dock) { display:none!important; } }


#seafix-demo.sf-chat-view #sf-account-menu-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;}