/* Shared layered glass for phone headers and wider application headers. */
#seafix-demo .sf-header-glass { display: none; }
#seafix-demo #sf-chat-roster-scroll { display: contents; }
@media (max-width: 759px) {
  #seafix-demo.sf-phone-header .sf-topbar {
    background: transparent;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: 8px;
  }
  #seafix-demo.sf-phone-header .sf-topbar::before,
  #seafix-demo.sf-phone-header .sf-topbar::after { content: none; }
  #seafix-demo.sf-phone-header .sf-header-glass {
    /* The user's marked boundary is the header edge. All six blur layers
       now fade upwards inside it; content below that line stays sharp. */
    --sf-glass-ramp: calc(70px * var(--sf-phone-glass-progress, 0));
    --sf-glass-full: calc(100% - var(--sf-glass-ramp));
    display: block; position: absolute; inset: 0; z-index: -1;
    width: auto; height: auto; border: 0; box-shadow: none; pointer-events: none;
  }
  #seafix-demo.sf-phone-header .sf-header-glass::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--sf-canvas);
    --sf-glass-tint-mask: linear-gradient(to bottom, #000 0,
      #000 calc(100% - 56px * var(--sf-phone-glass-progress, 0)),
      rgb(0 0 0 / .85) calc(100% - 40px * var(--sf-phone-glass-progress, 0)),
      rgb(0 0 0 / .45) calc(100% - 24px * var(--sf-phone-glass-progress, 0)), transparent 100%);
    -webkit-mask-image: var(--sf-glass-tint-mask); mask-image: var(--sf-glass-tint-mask);
  }
  #seafix-demo.sf-phone-header .sf-topbar .sf-brand-area {
    flex: 1 1 auto; min-width:0; width: auto; gap:6px; transform: none; transition: none;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #seafix-demo.sf-phone-header .sf-header-glass::after {
      /* 40% tint at the top, 15% through the middle and 8% near the edge.
         Strong blur, rather than opaque paint, removes the details above. */
      --sf-glass-top-tint: color-mix(in srgb, var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress, 0) * 60%), transparent);
      background: linear-gradient(to bottom,
        var(--sf-glass-top-tint) 0, var(--sf-glass-top-tint) var(--sf-glass-full),
        color-mix(in srgb, var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress, 0) * 85%), transparent) calc(var(--sf-glass-full) + var(--sf-glass-ramp) * .48),
        color-mix(in srgb, var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress, 0) * 92%), transparent) calc(var(--sf-glass-full) + var(--sf-glass-ramp) * .78),
        transparent 100%);
      -webkit-mask-image: none; mask-image: none;
    }
    #seafix-demo.sf-phone-header .sf-header-glass > span {
      position: absolute; inset: 0; pointer-events: none;
      opacity: var(--sf-phone-glass-progress, 0);
      -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
      --sf-glass-layer-mask: linear-gradient(to bottom, #000 0,
        #000 calc(var(--sf-glass-full) + var(--sf-glass-ramp) * var(--sf-glass-solid)),
        transparent calc(var(--sf-glass-full) + var(--sf-glass-ramp) * var(--sf-glass-clear)));
      -webkit-mask-image: var(--sf-glass-layer-mask); mask-image: var(--sf-glass-layer-mask);
    }
    /* The same six profiles as preview 3, from the clear lower edge upwards. */
    #seafix-demo .sf-header-glass > :nth-child(1) { --sf-glass-blur: 1px; --sf-glass-solid: .74; --sf-glass-clear: 1; }
    #seafix-demo .sf-header-glass > :nth-child(2) { --sf-glass-blur: 2px; --sf-glass-solid: .48; --sf-glass-clear: .87; }
    #seafix-demo .sf-header-glass > :nth-child(3) { --sf-glass-blur: 4px; --sf-glass-solid: .22; --sf-glass-clear: .63; }
    #seafix-demo .sf-header-glass > :nth-child(4) { --sf-glass-blur: 8px; --sf-glass-solid: .07; --sf-glass-clear: .45; }
    #seafix-demo .sf-header-glass > :nth-child(5) { --sf-glass-blur: 16px; --sf-glass-solid: 0; --sf-glass-clear: .28; }
    #seafix-demo .sf-header-glass > :nth-child(6) { --sf-glass-blur: 32px; --sf-glass-solid: 0; --sf-glass-clear: .14; }
  }

  /* The roster's filters, search and contacts share one phone scroll area.
     The conversation keeps its own message scroller and fixed composer. */
  #seafix-demo.sf-phone-header.sf-chat-view .sf-topbar { grid-column: 1; grid-row: 1; align-self: start; }
  #seafix-demo.sf-phone-header.sf-chat-view .sf-main { grid-column: 1; grid-row: 1 / 3; }
  #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-layout {
    box-sizing: border-box; padding-top: var(--sf-header-height, 76px);
    grid-template-rows: minmax(0, 1fr);
  }
  #seafix-demo.sf-phone-header.sf-chat-view :is(#sf-chat-roster-scroll, #sf-chat-messages) {
    margin-top: calc(-1 * var(--sf-header-underlap, 0px));
    scroll-padding-top: calc(var(--sf-header-underlap, 0px) + 12px);
  }
  #seafix-demo.sf-phone-header.sf-chat-view #sf-chat-roster-scroll {
    display: block; grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
    padding-top: var(--sf-header-underlap, 0px); padding-bottom: 20px;
    overflow-anchor: none;
  }
  #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-sections { padding-top: 0; overflow: visible; }
  #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-roster { height: auto; }
  #seafix-demo.sf-phone-header.sf-chat-view #sf-chat-people {
    flex: none; overflow: visible; margin-top: 0; padding-top: 1px; padding-bottom: 0;
  }
  #seafix-demo.sf-phone-header.sf-chat-view.sf-chat-peer-open #sf-chat-roster-scroll { display: none; }
  #seafix-demo.sf-phone-header.sf-chat-view #sf-chat-messages { padding-top: calc(var(--sf-header-underlap, 0px) + 20px); }
  #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-sections,
  #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-roster > :not(#sf-chat-people) {
    position: relative; z-index: auto; background: var(--sf-canvas);
  }
  #seafix-demo.sf-phone-header.sf-chat-view :is(.sf-chat-thread-header, #sf-chat-find-panel, #sf-chat-older) {
    position: relative; z-index: 25; background: transparent;
  }
  #seafix-demo.sf-phone-header.sf-chat-header-promoted .sf-header-glass::after {
    background: light-dark(rgb(245 245 247 / .48), rgb(17 17 19 / .48));
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
  @media (prefers-reduced-transparency: reduce) {
    #seafix-demo.sf-phone-header .sf-header-glass > span { display: none; }
    #seafix-demo.sf-phone-header .sf-header-glass::after {
      background: var(--sf-canvas);
      -webkit-mask-image: var(--sf-glass-tint-mask); mask-image: var(--sf-glass-tint-mask);
    }
  }
}
@media print {
  #seafix-demo.sf-phone-header .sf-header-glass { display: none; }
}

/* Update 76: a conversation takes the phone header's place without a second row. */
@media(max-width:759px){
  #seafix-demo.sf-chat-header-promoted .sf-topbar{padding:env(safe-area-inset-top,0px) 12px 4px;}
  #seafix-demo.sf-chat-header-promoted .sf-topbar :is(.sf-brand-area,.sf-crew-nav,.sf-top-actions,.sf-account-menu){display:none!important;}
  #seafix-demo.sf-phone-header.sf-chat-header-promoted .sf-topbar .sf-chat-thread-header{
    width:100%;min-width:0;min-height:64px;gap:8px;margin:0;padding:4px 0;
    border:0;background:transparent;box-sizing:border-box;
  }
  #seafix-demo.sf-chat-header-promoted .sf-chat-thread-copy{min-width:0;}
  #seafix-demo .sf-chat-minimize{display:none!important;}
}

/* Keep the recipient visible while message bubbles soften into the header. */
@media(max-width:999px){
  #seafix-demo.sf-chat-view .sf-chat-thread-header{border-bottom:0;background:transparent;}
  #seafix-demo.sf-chat-view .sf-chat-conversation{padding-bottom:4px;}
  #seafix-demo.sf-chat-header-promoted .sf-header-glass{bottom:-24px;}
  #seafix-demo.sf-chat-header-promoted .sf-header-glass::after{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
}

/* Let every signed-in page scroll under the full header on tablet and desktop. */
@media(min-width:760px){
  #seafix-demo.sf-wide-header-glass{
    --sf-wide-glass-overlap:64px;
    --sf-wide-glass-ramp:100px;
    --sf-wide-glass-tint-fade:78px;
    --sf-wide-glass-tint-mid:38px;
  }
  #seafix-demo.sf-wide-header-glass:has(.sf-layovers-page.sf-calendar-open:not([hidden])){
    --sf-wide-glass-overlap:18px;
    --sf-wide-glass-ramp:40px;
    --sf-wide-glass-tint-fade:30px;
    --sf-wide-glass-tint-mid:14px;
  }
  #seafix-demo.sf-wide-header-glass .sf-topbar{background:transparent;border-bottom:0;}
  #seafix-demo.sf-wide-header-glass .sf-topbar::after{content:none;}
  #seafix-demo.sf-wide-header-glass .sf-main{
    height:auto;margin-top:calc(-1 * var(--sf-wide-glass-overlap));
    padding-top:calc(10px + var(--sf-wide-glass-overlap));
    scroll-padding-top:calc(12px + var(--sf-wide-glass-overlap));
  }
  #seafix-demo.sf-wide-header-glass .sf-main:has(> :is([data-screen="home"],[data-screen="assigned"],[data-screen="completed"],[data-screen="statistics"],[data-screen="reports"],[data-screen="report"],[data-screen="layovers"],[data-screen="smt"],[data-screen="notification-inbox"]):not([hidden])){
    padding-top:calc(var(--sf-work-top-space) + var(--sf-wide-glass-overlap));
  }
  #seafix-demo.sf-wide-header-glass .sf-main.sf-header-fade-active{
    -webkit-mask-image:none;mask-image:none;
  }
  #seafix-demo.sf-wide-header-glass .sf-header-glass{
    --sf-glass-ramp:calc(var(--sf-wide-glass-ramp) * var(--sf-phone-glass-progress,0));
    --sf-glass-full:calc(100% - var(--sf-glass-ramp));
    display:block;position:absolute;inset:0 0 calc(-1 * var(--sf-wide-glass-overlap) * var(--sf-phone-glass-progress,0));
    z-index:-1;pointer-events:none;border:0;box-shadow:none;
  }
  #seafix-demo.sf-wide-header-glass .sf-header-glass::after{
    content:"";position:absolute;inset:0;pointer-events:none;background:var(--sf-canvas);
    --sf-glass-tint-mask:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--sf-wide-glass-tint-fade) * var(--sf-phone-glass-progress,0)),rgb(0 0 0 / .45) calc(100% - var(--sf-wide-glass-tint-mid) * var(--sf-phone-glass-progress,0)),transparent 100%);
    -webkit-mask-image:var(--sf-glass-tint-mask);mask-image:var(--sf-glass-tint-mask);
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    #seafix-demo.sf-wide-header-glass .sf-header-glass::after{
      --sf-glass-top-tint:color-mix(in srgb,var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress,0) * 60%),transparent);
      background:linear-gradient(to bottom,var(--sf-glass-top-tint) 0,var(--sf-glass-top-tint) var(--sf-glass-full),color-mix(in srgb,var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress,0) * 85%),transparent) calc(var(--sf-glass-full) + var(--sf-glass-ramp) * .48),color-mix(in srgb,var(--sf-canvas) calc(100% - var(--sf-phone-glass-progress,0) * 92%),transparent) calc(var(--sf-glass-full) + var(--sf-glass-ramp) * .78),transparent 100%);
      -webkit-mask-image:none;mask-image:none;
    }
    #seafix-demo.sf-wide-header-glass .sf-header-glass>span{
      position:absolute;inset:0;pointer-events:none;opacity:var(--sf-phone-glass-progress,0);
      -webkit-backdrop-filter:blur(var(--sf-glass-blur));backdrop-filter:blur(var(--sf-glass-blur));
      --sf-glass-layer-mask:linear-gradient(to bottom,#000 0,#000 calc(var(--sf-glass-full) + var(--sf-glass-ramp) * var(--sf-glass-solid)),transparent calc(var(--sf-glass-full) + var(--sf-glass-ramp) * var(--sf-glass-clear)));
      -webkit-mask-image:var(--sf-glass-layer-mask);mask-image:var(--sf-glass-layer-mask);
    }
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(1){--sf-glass-blur:1px;--sf-glass-solid:.74;--sf-glass-clear:1;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(2){--sf-glass-blur:2px;--sf-glass-solid:.48;--sf-glass-clear:.87;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(3){--sf-glass-blur:4px;--sf-glass-solid:.22;--sf-glass-clear:.63;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(4){--sf-glass-blur:8px;--sf-glass-solid:.07;--sf-glass-clear:.45;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(5){--sf-glass-blur:16px;--sf-glass-solid:0;--sf-glass-clear:.28;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass>:nth-child(6){--sf-glass-blur:32px;--sf-glass-solid:0;--sf-glass-clear:.14;}
    #seafix-demo.sf-wide-header-glass:has(.sf-layovers-page.sf-calendar-open:not([hidden])) .sf-header-glass>:nth-child(3){--sf-glass-blur:2px;}
    #seafix-demo.sf-wide-header-glass:has(.sf-layovers-page.sf-calendar-open:not([hidden])) .sf-header-glass>:nth-child(4){--sf-glass-blur:4px;}
    #seafix-demo.sf-wide-header-glass:has(.sf-layovers-page.sf-calendar-open:not([hidden])) .sf-header-glass>:nth-child(5){--sf-glass-blur:8px;}
    #seafix-demo.sf-wide-header-glass:has(.sf-layovers-page.sf-calendar-open:not([hidden])) .sf-header-glass>:nth-child(6){--sf-glass-blur:12px;}
  }
  @media(prefers-reduced-transparency:reduce){
    #seafix-demo.sf-wide-header-glass .sf-header-glass>span{display:none;}
    #seafix-demo.sf-wide-header-glass .sf-header-glass::after{background:var(--sf-canvas);-webkit-mask-image:var(--sf-glass-tint-mask);mask-image:var(--sf-glass-tint-mask);}
  }
}
@media print{#seafix-demo.sf-wide-header-glass .sf-header-glass{display:none;}}

/* Compact module labels leave room for the full-sized application wordmark. */
@media(max-width:479px){
  #seafix-demo.sf-phone-header .sf-topbar { padding-left:max(12px,env(safe-area-inset-left,0px)); }
  #seafix-demo.sf-phone-header .sf-topbar .sf-brand-lockup { gap:5px; }
  #seafix-demo.sf-phone-header .sf-topbar .sf-crewchat-brand { font-size:12px; padding-inline:3px; }
  #seafix-demo.sf-phone-header .sf-topbar :is(#sf-notification-bell,#sf-account-menu-toggle) { width:40px; min-width:40px; }
}

/* Desktop work columns keep their initial position and gain room to scroll under the logo. */
@media (min-width:1000px){
  #seafix-demo:not(.sf-chat-view) .sf-main{box-sizing:border-box;min-height:0;height:100%;padding-bottom:40px;scroll-padding-bottom:40px;overflow-y:auto;}
  #seafix-demo.sf-wide-header-glass:not(.sf-chat-view) .sf-main{height:calc(100% + var(--sf-wide-glass-overlap));}
  #seafix-demo.sf-settings-view .sf-main{height:100%;padding:0;overflow:hidden;}
  #seafix-demo.sf-wide-header-glass.sf-split-view:not(.sf-chat-view) .sf-main{padding-top:0!important;padding-bottom:0;}
  #seafix-demo:not(.sf-chat-view):not(.sf-split-view) .sf-main>.sf-screen:not([hidden]){
    box-sizing:border-box;
    min-height:100%;
  }
  #seafix-demo.sf-wide-header-glass.sf-split-view .sf-main>.sf-scroll-column:not([hidden]){
    box-sizing:border-box;
    min-height:0;
    height:100%;
    margin-top:0;
    padding-top:calc(var(--sf-wide-glass-overlap) + var(--sf-work-top-space,6px));
    padding-bottom:40px;
    overflow-y:auto;
    scroll-padding-top:calc(var(--sf-wide-glass-overlap) + 8px);
    -webkit-mask-image:none;
    mask-image:none;
  }
  #seafix-demo.sf-wide-header-glass.sf-split-view:has(.sf-main>[data-screen="detail-empty"]:not([hidden])) .sf-header-glass{
    clip-path:inset(0 calc(100% - var(--sf-shortcuts-cutout-left, 50%)) 0 0);
  }
}
@media (min-width:760px) and (max-width:999px){
  #seafix-demo:not(.sf-chat-view) .sf-main>.sf-screen:not([hidden]){
    box-sizing:border-box;
    min-height:calc(100svh - var(--sf-header-height, 80px) - var(--sf-nav-height, 72px));
  }
}

/* Approved module lockups: original mark, wordmark, vertical rule, plain label. */
#seafix-demo .sf-topbar .sf-brand-area { flex:1 1 auto; min-width:0; gap:0; }
#seafix-demo .sf-topbar .sf-brand-lockup { flex:0 1 auto; }
#seafix-demo .sf-topbar :is(#sf-crewchat-brand,#sf-fleet-brand) {
  position:relative; flex:0 0 auto; display:inline-flex; align-items:center;
  margin-left:14px; padding:0 0 0 16px; border:0; border-radius:0;
  background:transparent; color:var(--sf-heading); font-size:20px; font-weight:600;
  line-height:1.2; letter-spacing:-.025em; white-space:nowrap;
}
#seafix-demo .sf-topbar :is(#sf-crewchat-brand,#sf-fleet-brand)::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:1.15em; background:var(--sf-muted); opacity:.6;
}
#seafix-demo .sf-topbar :is(#sf-crewchat-brand,#sf-fleet-brand)[hidden] { display:none; }
#seafix-demo:not(.is-logged-out) .sf-topbar { background:var(--sf-canvas); }
#seafix-demo.sf-phone-header .sf-topbar,
#seafix-demo.sf-wide-header-glass .sf-topbar { background:transparent; }
@media(max-width:479px){
  #seafix-demo .sf-topbar .sf-brand-lockup { gap:6px; }
  #seafix-demo .sf-topbar .sf-brand { font-size:18px; }
  #seafix-demo .sf-topbar .sf-brand-mark { width:34px; height:34px; border-radius:9px; }
  #seafix-demo .sf-topbar :is(#sf-crewchat-brand,#sf-fleet-brand) { font-size:13px; margin-left:8px; padding-left:9px; }
}
@media(max-width:370px){
  #seafix-demo .sf-topbar .sf-brand-lockup { gap:5px; }
  #seafix-demo .sf-topbar .sf-brand { font-size:16px; }
  #seafix-demo .sf-topbar .sf-brand-mark { width:30px; height:30px; border-radius:8px; }
  #seafix-demo .sf-topbar :is(#sf-crewchat-brand,#sf-fleet-brand) { font-size:11px; margin-left:6px; padding-left:7px; }
}

@media(max-width:370px){
  #seafix-demo .sf-topbar { gap:6px; }
  #seafix-demo .sf-topbar .sf-top-actions { gap:4px; }
  #seafix-demo.sf-phone-header .sf-topbar :is(#sf-notification-bell,#sf-account-menu-toggle) { width:36px; min-width:36px; }
}

/* Fleet context uses the same rule, type and separator spacing as the module label. */
#seafix-demo .sf-topbar #sf-fleet-brand{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block}
#seafix-demo .sf-topbar #sf-fleet-brand[hidden]{display:none}
@media(max-width:999px){#seafix-demo .sf-topbar #sf-fleet-brand{display:none}}

/* Breathing room above the mark, with a balanced compact fleet header. */
#seafix-demo:not(.is-logged-out) .sf-topbar{padding-top:calc(24px + env(safe-area-inset-top,0px))}
@media(max-width:999px){
 #seafix-demo.sf-phone-header .sf-topbar,#seafix-demo.sf-wide-header-glass .sf-topbar{padding-top:calc(8px + env(safe-area-inset-top,0px))}
 #seafix-demo.fv-on-fleet .sf-topbar{padding-bottom:4px}
 #seafix-demo.fv-on-fleet .sf-main{padding-top:8px}
 #seafix-demo.fv-on-fleet .sf-topbar #sf-settings-back{display:none}
}
@media(max-width:479px){
 #seafix-demo.fv-on-fleet .sf-topbar{gap:6px}
 #seafix-demo.fv-on-fleet .sf-topbar .sf-brand{font-size:15px}
 #seafix-demo.fv-on-fleet .sf-topbar .sf-brand-mark{width:30px;height:30px}
 #seafix-demo.fv-on-fleet .sf-topbar #sf-crewchat-brand{font-size:11px;margin-left:5px;padding-left:6px}
 #seafix-demo.fv-on-fleet .sf-topbar .sf-top-actions{gap:2px}
 #seafix-demo.fv-on-fleet .sf-topbar :is(#sf-notification-bell,#sf-account-menu-toggle){width:36px;min-width:36px}
}
@media(max-width:370px){
 #seafix-demo.fv-on-fleet .sf-topbar .sf-brand{font-size:14px}
 #seafix-demo.fv-on-fleet .sf-topbar .sf-brand-mark{width:28px;height:28px}
 #seafix-demo.fv-on-fleet .sf-topbar #sf-crewchat-brand{font-size:10px}
 #seafix-demo.fv-on-fleet .sf-topbar :is(#sf-notification-bell,#sf-account-menu-toggle){width:32px;min-width:32px}
}

/* Installed apps retain only the OS safe area; browser spacing stays unchanged. */
#seafix-demo.sf-native-app:not(.is-logged-out) .sf-topbar{padding-top:env(safe-area-inset-top,0px)}