/* KONEVIX 1.21 — physically sampled liquid edge, one surface for all orientations. */
:root{
  --utility-dock-bg:color-mix(in srgb,var(--color-surface-primary,var(--card)) 83%,transparent);
  --utility-dock-bg-expanded:color-mix(in srgb,var(--color-surface-elevated,var(--card)) 88%,transparent);
  --utility-dock-border:color-mix(in srgb,var(--color-accent) 27%,var(--color-border-default,var(--border)));
  --utility-dock-accent-start:color-mix(in srgb,var(--color-accent) 25%,var(--color-surface-primary,var(--card)));
  --utility-dock-accent-mid:color-mix(in srgb,var(--color-accent) 63%,var(--color-surface-primary,var(--card)));
  --utility-dock-accent-end:color-mix(in srgb,var(--color-accent) 32%,var(--color-surface-elevated,var(--card)));
  --utility-dock-wave-glow:color-mix(in srgb,var(--color-accent) 24%,transparent);
  --utility-dock-shadow:0 5px 24px color-mix(in srgb,var(--color-text-primary,var(--text)) 13%,transparent);
  --utility-dock-icon-bg:color-mix(in srgb,var(--color-surface-primary,var(--card)) 80%,transparent);
  --utility-dock-icon-hover:var(--color-accent-soft,var(--color-surface-hover));
  --utility-dock-icon-active:color-mix(in srgb,var(--color-accent) 18%,var(--color-surface-primary,var(--card)));
  --utility-dock-notification-glow:color-mix(in srgb,var(--color-accent) 36%,transparent);
  --utility-dock-notification-urgent:var(--color-danger,var(--color-warning,var(--color-accent)));
}
/* Only a glassy strip plus an actual unread badge; never decorative handles. */
.layout.dual-nav>.utility-dock.dock-widget .dock-strip{
  position:relative;isolation:isolate;box-sizing:border-box;
  background:var(--utility-dock-bg)!important;border:0!important;
  box-shadow:0 4px 18px color-mix(in srgb,var(--color-text-primary,var(--text)) 10%,transparent)!important;
  padding:0!important;overflow:visible!important;cursor:pointer;
  color:var(--color-text-primary,var(--text))!important;
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  transition:opacity .24s ease,box-shadow .28s ease!important;
}
.layout.dual-nav>.utility-dock.dock-widget .dock-strip::before,
.layout.dual-nav>.utility-dock.dock-widget .dock-strip::after {display:none!important;content:none!important}
.utility-dock.dock-widget .dock-strip-mark{display:none!important}
.utility-dock.dock-widget .dock-liquid-svg{
  position:absolute;inset:0;overflow:visible!important;pointer-events:none;
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 3px 10px var(--utility-dock-wave-glow));
  opacity:.78;transition:opacity .22s ease,filter .22s ease;
}
.utility-dock.dock-widget .dock-liquid-shape{stroke:none;stroke-width:0;vector-effect:non-scaling-stroke;transition:filter .2s ease}
.layout.dual-nav>.utility-dock.dock-widget .dock-strip-count{
  position:absolute!important;z-index:3;min-height:17px;height:auto;min-width:20px;
  background:var(--color-accent)!important;color:var(--color-on-accent,#fff)!important;
  padding:2px 4px;border-radius:999px;font-size:10px;line-height:14px;
  box-shadow:0 0 0 2px var(--utility-dock-bg);pointer-events:none;
}
.layout.dual-nav>.utility-dock.dock-widget.dock-axis-horizontal .dock-strip-count{right:-9px;top:-8px}
.layout.dual-nav>.utility-dock.dock-widget.dock-axis-vertical .dock-strip-count{right:-10px;top:-8px}
.layout.dual-nav.du-utility-left>.utility-dock.dock-widget .dock-strip-count{right:-10px;left:auto}
/* No 5.5-second permanent hue cycling inherited from the historical Dock. */
.layout.dual-nav>.utility-dock.dock-widget.dock-has-unread .nav.nav-has-unread .nav-icon,
.layout.dual-nav>.utility-dock.dock-widget.dock-has-unread .dock-overflow-popover .nav.nav-has-unread .nav-icon{
  animation:none!important;filter:none!important;
}
/* Muted active state; shimmer only on a new event, never persistent blink. */
.utility-dock.dock-widget.dock-has-unread .dock-strip{
  background:var(--utility-dock-bg)!important;border-color:var(--utility-dock-border)!important;
  box-shadow:0 2px 15px var(--utility-dock-notification-glow)!important;
  animation:none!important;color:var(--color-text-primary,var(--text))!important;
}
.utility-dock.dock-widget.dock-indicator-urgent .dock-strip-count{background:var(--utility-dock-notification-urgent)!important}
@keyframes kv-liquid-event{0%{filter:drop-shadow(0 0 0 transparent);opacity:.75}40%{filter:drop-shadow(0 0 12px var(--utility-dock-notification-glow));opacity:1}100%{filter:drop-shadow(0 3px 9px var(--utility-dock-wave-glow));opacity:.78}}
.utility-dock.dock-widget.dock-new-event .dock-liquid-svg{animation:kv-liquid-event 1.1s ease-out 1}
/* Single liquid receding 'plop' at the end of collapse, no endless bouncing. */
@keyframes kv-liquid-merge{
  0%{transform:scale(.93);opacity:.52}
  50%{transform:scale(1.045);opacity:.95}
  72%{transform:scale(.985);opacity:.80}
  100%{transform:scale(1);opacity:.78}
}
.utility-dock.dock-widget.dock-liquid-returning .dock-liquid-svg{animation:kv-liquid-merge .54s cubic-bezier(.19,.8,.3,1) 1}
/* An incoming event briefly shifts the gradient's middle tint. */
@keyframes kv-liquid-tint{
  0%,100%{stop-color:var(--utility-dock-accent-mid)}
  45%{stop-color:var(--utility-dock-accent-end)}
  75%{stop-color:var(--utility-dock-accent-start)}
}
.utility-dock.dock-widget.dock-new-event #dockLiquidGradient stop:nth-child(2){animation:kv-liquid-tint 1.1s ease-out 1}
/* 1.21.1: no panel: just bare icons emerging from the liquid strip.
   Previous releases still carry dock-body glass and ::before panel styling.
   Override their full specificity rather than hiding this behind another card. */
.layout.dual-nav>.utility-dock.dock-widget .dock-body{
  z-index:3!important;box-sizing:border-box!important;
  display:block!important;width:max-content!important;min-width:0!important;
  height:max-content!important;min-height:0!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;
  transition:opacity .24s ease,transform .37s cubic-bezier(.16,1.07,.25,1),visibility 0s linear .37s!important;
}
.layout.dual-nav>.utility-dock.dock-widget.dock-state-open .dock-body{transition-delay:0s!important}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation{
  isolation:auto;position:relative;display:flex!important;
  width:max-content!important;height:max-content!important;min-width:0!important;
  padding:0!important;margin:0!important;
  gap:var(--dock-gap,7px)!important;
  overflow:visible!important;scrollbar-width:none;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* The v1.21 rounded ::before was the second unwanted white rectangle. */
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation::before,
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation::after{
  content:none!important;display:none!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
/* Keep the original slim strip visible while icons float free above/beside it. */
.layout.dual-nav>.utility-dock.dock-widget.dock-state-open .dock-strip{
  opacity:.82!important;pointer-events:none!important;
}
/* Position the unboxed icon row outside the strip, in the content-facing direction. */
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="bottom"] .dock-body{
  left:50%!important;right:auto!important;top:auto!important;bottom:calc(100% + 7px)!important;
  transform:translateX(-50%) translateY(12px) scale(.94)!important;transform-origin:center bottom;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="bottom"].dock-state-open .dock-body{
  transform:translateX(-50%)!important;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="top"] .dock-body{
  left:50%!important;right:auto!important;bottom:auto!important;top:calc(100% + 7px)!important;
  transform:translateX(-50%) translateY(-12px) scale(.94)!important;transform-origin:center top;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="top"].dock-state-open .dock-body{
  transform:translateX(-50%)!important;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="left"] .dock-body{
  left:calc(100% + 7px)!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%) translateX(-12px) scale(.94)!important;transform-origin:left center;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="left"].dock-state-open .dock-body{
  transform:translateY(-50%)!important;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="right"] .dock-body{
  right:calc(100% + 7px)!important;left:auto!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%) translateX(12px) scale(.94)!important;transform-origin:right center;
}
.layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="right"].dock-state-open .dock-body{
  transform:translateY(-50%)!important;
}
.layout.dual-nav>.utility-dock.dock-widget.dock-axis-horizontal .utility-navigation{flex-direction:row!important}
.layout.dual-nav>.utility-dock.dock-widget.dock-axis-vertical .utility-navigation{flex-direction:column!important}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation>.nav-entry,
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation>.dock-overflow-toggle{
  opacity:0;filter:blur(2px);transform:translate(var(--liquid-emerge-x,0px),var(--liquid-emerge-y,0px)) scale(.72);
  transition:opacity .20s ease,filter .27s ease,transform .39s cubic-bezier(.2,1.18,.26,1);
  transition-delay:calc(var(--liquid-reverse,0) * 12ms);
}
.layout.dual-nav>.utility-dock.dock-widget.dock-state-open .utility-navigation>.nav-entry,
.layout.dual-nav>.utility-dock.dock-widget.dock-state-open .utility-navigation>.dock-overflow-toggle{
  opacity:1;filter:none;transform:none;
  transition-delay:calc(var(--liquid-index,0) * 25ms);
}
.layout.dual-nav.du-utility-bottom>.utility-dock.dock-widget{--liquid-emerge-y:15px}
.layout.dual-nav.du-utility-top>.utility-dock.dock-widget{--liquid-emerge-y:-15px}
.layout.dual-nav.du-utility-left>.utility-dock.dock-widget{--liquid-emerge-x:-15px}
.layout.dual-nav.du-utility-right>.utility-dock.dock-widget{--liquid-emerge-x:15px}
/* No tile outlines or permanently painted button backgrounds. Hit areas stay 44+px. */
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav,
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .dock-overflow-toggle{
  box-sizing:border-box;position:relative;
  width:var(--dock-button-size,46px)!important;
  height:var(--dock-button-size,46px)!important;
  min-width:var(--dock-button-size,46px)!important;
  min-height:var(--dock-button-size,46px)!important;
  padding:6px!important;
  border:0!important;border-radius:999px!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;outline-offset:3px;
  color:var(--color-text-primary,var(--text))!important;
  transform:scale(var(--liquid-magnify,1))!important;
  transition:transform .18s cubic-bezier(.2,.9,.25,1),color .17s ease,background-color .17s ease!important;
}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav:hover,
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .dock-overflow-toggle:hover{
  background:color-mix(in srgb,var(--color-accent) 10%,transparent)!important;
  color:var(--color-accent)!important;
  border:0!important;box-shadow:none!important;
}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav.active{
  background:color-mix(in srgb,var(--color-accent) 14%,transparent)!important;
  color:var(--color-accent)!important;
}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav:active{transform:scale(.94)!important}
/* Badges remain attached to icons, not to a giant panel. */
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav-badge{
  z-index:6;right:-7px!important;top:-7px!important;
  min-width:20px;min-height:18px;padding:1px 5px;line-height:14px;
  box-shadow:0 0 0 2px var(--color-surface-primary,var(--card));
}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav:focus-visible,
.layout.dual-nav>.utility-dock.dock-widget #dockStripToggle:focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:4px}
/* The icon depresses into the surface with one short local liquid pulse. */
@keyframes kv-liquid-ripple{from{opacity:.34;transform:scale(.2)}to{opacity:0;transform:scale(1.3)}}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav{position:relative;overflow:visible}
.layout.dual-nav>.utility-dock.dock-widget .utility-navigation .nav.dock-liquid-tap::after{
  content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  background:var(--utility-dock-notification-glow);animation:kv-liquid-ripple .36s ease-out 1;
}
/* Protect the Kanban horizontal scrollbar and workspace lower tools. */
.layout.dual-nav.du-utility-bottom>.utility-dock.dock-widget.dock-axis-horizontal{
  bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px))!important;
}
/* Bottom/top/left/right surface emerges toward content, not the viewport edge. */
.layout.dual-nav>.utility-dock.dock-widget .dock-overflow-toggle{font-size:12px;font-weight:700;letter-spacing:0}
@media(max-width:900px){
  .layout.dual-nav>.utility-dock.dock-widget.dock-axis-horizontal{
    width:min(52vw,180px)!important;height:18px!important;
    bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
  .layout.dual-nav>.utility-dock.dock-widget .dock-strip{min-height:0!important;height:18px!important;width:100%!important;max-width:100%;border-radius:999px!important}
  .layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="bottom"]{
    --liquid-emerge-y:15px;--liquid-emerge-x:0px;
  }
  .layout.dual-nav>.utility-dock.dock-widget .dock-body{max-width:calc(100vw - 20px)!important;width:max-content!important}
  .layout.dual-nav>.utility-dock.dock-widget[data-dock-physical-side="bottom"] .dock-body{
    top:auto!important;left:50%!important;right:auto!important;bottom:calc(100% + 7px)!important;
  }
  .layout.dual-nav>.utility-dock.dock-widget .utility-navigation{max-width:calc(100vw - 32px)!important}
}
@media(hover:none){.utility-dock.dock-widget .utility-navigation .nav{transform:none!important}}
@media(prefers-reduced-motion:reduce){
  .utility-dock.dock-widget,.utility-dock.dock-widget *,
  .utility-dock.dock-widget .utility-navigation::before{animation:none!important;transition:none!important}
  .utility-dock.dock-widget .utility-navigation>.nav-entry{filter:none!important}
}
