/* A fixed-size frame keeps document and chat scroll positions steady as the dock folds. */
#seafix-demo .sf-dock-frame { display:none; }
@media(max-width:999px) {
  #seafix-demo .sf-dock-frame {
    --sf-dock-height:68px;
    --sf-dock-safe:max(14px,calc(env(safe-area-inset-bottom,0px) * .6));
    --sf-dock-gap:0px;
    display:flex; align-items:flex-end; justify-content:center;
    position:fixed; z-index:22; left:0; right:0;
    top:calc(var(--sf-viewport-top,0px) + var(--sf-viewport-height,100dvh) - var(--sf-nav-height,72px));
    box-sizing:border-box;
    width:100%; height:calc(var(--sf-dock-height) + var(--sf-dock-safe) + var(--sf-dock-gap));
    padding-bottom:calc(var(--sf-dock-safe) + var(--sf-dock-gap));
    pointer-events:none;
  }
  #seafix-demo.sf-chat-view .sf-dock-frame { position:static; inset:auto; grid-row:3; }
  #seafix-demo.is-logged-out .sf-dock-frame { display:none; }
  #seafix-demo .sf-dock-frame .sf-bottom-nav {
    position:relative; inset:auto; flex:none; pointer-events:auto;
    width:calc(100% - 2 * var(--sf-dock-edge)); max-width:640px;
    height:var(--sf-dock-height); margin:0;
    padding:5px 2px;
    --sf-nav-surface:light-dark(#ededf1,#242427);
    background:var(--sf-nav-surface); border-radius:20px;
    box-shadow:0 3px 18px rgb(15 18 25 / .08);
    transition:width .24s ease,height .24s ease,border-radius .24s ease,padding .24s ease;
  }
  #seafix-demo .sf-dock-frame .sf-nav-item {
    height:56px; min-height:44px; padding:0; gap:3px;
    transition:height .24s ease,gap .24s ease,color .16s ease,transform .16s ease;
  }
  #seafix-demo .sf-dock-frame .sf-nav-label {
    height:14px; min-height:0; flex:0 0 auto; opacity:1; font-size:11px;
    transition:height .24s ease,opacity .16s ease;
  }
  #seafix-demo .sf-dock-frame .sf-nav-add .sf-nav-icon {
    transition:width .24s ease,height .24s ease,flex-basis .24s ease,top .24s ease,margin .24s ease,border-width .24s ease;
  }
  #seafix-demo .sf-dock-frame .sf-bottom-nav.is-compact {
    width:calc((100% - 2 * var(--sf-dock-edge)) * .94); max-width:602px;
    height:54px; padding:4px 2px; border-radius:18px;
  }
  #seafix-demo .sf-dock-frame .is-compact .sf-nav-item { height:44px; gap:0; }
  #seafix-demo .sf-dock-frame .is-compact .sf-nav-label { height:0; opacity:0; overflow:hidden; }
  #seafix-demo .sf-dock-frame .is-compact .sf-nav-add .sf-nav-icon {
    width:40px; height:40px; flex-basis:40px; top:0; margin-bottom:0; border-width:2px;
  }
  @media(max-width:370px) {
    #seafix-demo .sf-dock-frame .sf-nav-label { font-size:10px; }
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    #seafix-demo .sf-dock-frame .sf-bottom-nav {
      --sf-nav-surface:light-dark(rgb(245 245 249 / .22),rgb(35 35 39 / .3));
      backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
    }
  }
  @media(prefers-reduced-transparency:reduce) {
    #seafix-demo .sf-dock-frame .sf-bottom-nav {
      --sf-nav-surface:light-dark(#ededf1,#242427);
      backdrop-filter:none; -webkit-backdrop-filter:none;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    #seafix-demo .sf-dock-frame :is(.sf-bottom-nav,.sf-nav-item,.sf-nav-label,.sf-nav-icon) { transition:none; }
  }
}

@media print { #seafix-demo .sf-dock-frame { display:none; } }

/* Allow panning while suppressing gesture zoom on touch-screen app layouts. */
@media(pointer:coarse){
  html:has(#seafix-demo), body:has(#seafix-demo) { touch-action:pan-x pan-y; }
}
@media(max-width:999px){
 #seafix-demo.sf-chat-view .sf-dock-frame{max-height:140px;overflow:visible;transition:max-height .26s cubic-bezier(.2,.7,.2,1),padding-bottom .26s cubic-bezier(.2,.7,.2,1),opacity .2s ease;}
 #seafix-demo.sf-chat-view.sf-chat-keyboard-open .sf-dock-frame{max-height:0;overflow:hidden;padding-bottom:0;opacity:0;pointer-events:none;}
 #seafix-demo.sf-chat-view.sf-chat-keyboard-open .sf-chat-conversation{padding-bottom:7px;}
}
@media(prefers-reduced-motion:reduce){#seafix-demo.sf-chat-view .sf-dock-frame{transition:none;}}