@media screen {
  :root {
    --twfb-edge: 16px;
    --twfb-column-gap: 10px;
    /* The native back-to-top button slides 14px toward the finder during its fade. */
    --twfb-row-gap: 18px;
    --twfb-left: calc(var(--twfb-edge) + env(safe-area-inset-left, 0px));
    --twfb-right: calc(var(--twfb-edge) + env(safe-area-inset-right, 0px));
    --twfb-bottom: calc(var(--twfb-edge) + env(safe-area-inset-bottom, 0px));
    --twfb-column: calc((100% - var(--twfb-left) - var(--twfb-right) - var(--twfb-column-gap)) / 2);
    --twfb-favorite-slot: calc(52px + var(--twfb-row-gap));
    --twfb-finder-slot: calc(46px + var(--twfb-row-gap));
    --twfb-cookie-slot: calc(35px + var(--twfb-row-gap));
  }

  /* Leave visibility, stacking order, focus and click handling to the original controls. */
  body a.nrvfav-launcher,
  body #twcv-reopen,
  body .nrvfav-toast[data-nrvfav-toast] {
    left: var(--twfb-left);
    right: auto;
  }

  body a.nrvmotif-launcher[data-nrvmotif-launcher],
  body #vyk-back-top {
    right: var(--twfb-right);
    left: auto;
  }

  body a.nrvfav-launcher,
  body a.nrvmotif-launcher[data-nrvmotif-launcher] {
    bottom: var(--twfb-bottom);
    box-sizing: border-box;
    max-width: var(--twfb-column);
  }

  body #twcv-reopen {
    bottom: calc(var(--twfb-bottom) + var(--twfb-favorite-slot));
    box-sizing: border-box;
    max-width: var(--twfb-column);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body #vyk-back-top {
    bottom: calc(var(--twfb-bottom) + var(--twfb-finder-slot));
  }

  body .nrvfav-toast[data-nrvfav-toast] {
    bottom: calc(var(--twfb-bottom) + var(--twfb-favorite-slot) + var(--twfb-cookie-slot));
    box-sizing: border-box;
    max-width: min(330px, var(--twfb-column));
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --twfb-edge: 8px;
    --twfb-column-gap: 8px;
    --twfb-favorite-slot: calc(48px + var(--twfb-row-gap));
    --twfb-finder-slot: calc(48px + var(--twfb-row-gap));
  }

  body a.nrvfav-launcher,
  body a.nrvmotif-launcher[data-nrvmotif-launcher] {
    height: auto;
    min-height: 48px;
    min-width: 0;
    white-space: normal;
  }

  body a.nrvfav-launcher > span:not([data-nrvfav-count]),
  body a.nrvmotif-launcher[data-nrvmotif-launcher] > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Enhanced toolbar. Native launchers keep their module context and the CSS-only layout above. */
@media screen {
  [data-twfb-original] { clip-path: inset(50%) !important; pointer-events: none !important; }
  #twfb-dock, #twfb-dock * { box-sizing: border-box; }
  #twfb-dock {
    position: fixed; z-index: 105; left: 0; right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch; justify-content: center; width: max-content;
    max-width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    margin: 0 auto; padding: 4px; background: #fff; color: #46364b; border: 1px solid #e4dbe2;
    border-radius: 16px; box-shadow: 0 3px 18px rgba(61, 41, 59, .18);
    font-family: inherit;
  }
  #twfb-dock[hidden], #twfb-dock [hidden], .twfb-dock-space[hidden] { display: none !important; }
  #twfb-dock .twfb-action {
    position: relative; display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center;
    gap: .42rem; min-width: 0; min-height: 44px; padding: .38rem .85rem; color: #49364a;
    background: transparent; border: 0; border-radius: 11px; text-align: center; text-decoration: none;
    font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere;
  }
  #twfb-dock .twfb-action:hover, #twfb-dock .twfb-action:focus-visible { background: #f5eef2; color: #752441; text-decoration: none; }
  #twfb-dock .twfb-action:focus-visible { outline: 2px solid #80324e; outline-offset: -3px; }
  #twfb-dock .twfb-action svg { display: block; flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; }
  #twfb-dock .twfb-favorites svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
  #twfb-dock .twfb-count {
    padding: .1em .4em; border-radius: 5px; color: #614460; background: #f1eaf0; font-size: .82em;
    font-variant-numeric: tabular-nums;
  }
  .twfb-dock-space { height: calc(var(--twfb-dock-height, 0px) + 24px + env(safe-area-inset-bottom, 0px)); }
  body[data-twfb-dock] .nrvfav-toast[data-nrvfav-toast] {
    bottom: calc(var(--twfb-dock-height) + 22px + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 24px);
  }
}
@media screen and (max-width: 767px) {
  #twfb-dock {
    left: max(6px, env(safe-area-inset-left, 0px)); right: max(6px, env(safe-area-inset-right, 0px));
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)); max-width: 32rem; width: auto;
    padding: 3px; border-radius: 13px;
  }
  #twfb-dock .twfb-action { flex: 1 1 0; gap: .24rem; padding: .32rem .16rem; font-size: .8125rem; }
  #twfb-dock .twfb-action svg { width: .95rem; height: .95rem; flex-basis: .95rem; }
  #twfb-dock .twfb-mobile-top {
    --twfb-top-size: max(46px, 3rem);
    align-self: center; flex: 0 0 var(--twfb-top-size);
    width: var(--twfb-top-size); height: var(--twfb-top-size); min-height: var(--twfb-top-size);
    margin: 0; padding: 0; border-radius: 50%; appearance: none;
    color: #fff; background: #574861; cursor: pointer;
    font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; text-transform: none;
  }
  #twfb-dock .twfb-mobile-top:hover,
  #twfb-dock .twfb-mobile-top:focus-visible { color: #fff; background: #46394f; }
  #twfb-dock .twfb-mobile-top:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  body[data-twfb-dock] #twcv-context { clear: both; width: 100%; text-align: center; }
  body[data-twfb-dock] #twcv-reopen:not([hidden]) {
    position: static; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; max-width: 100%; padding: .4rem .75rem;
    color: #574861 !important; background: transparent; border-radius: 4px; box-shadow: none;
    font: inherit; font-size: .875rem; text-decoration: underline !important; text-underline-offset: .16em;
  }
}
@media screen and (max-width: 355px) {
  #twfb-dock .twfb-action svg { display: none; }
}
@media print {
  #twfb-dock, .twfb-dock-space, [data-twfb-original], body[data-twfb-dock] #twcv-reopen { display: none !important; }
}
