/* dock.css — the dock along the bottom of every page (Luis, 2026-10-14).
   See dock.php. Frosted soft-white glass, Apple ink (#1d1d1f) icons and words.
   Since 2026-10-15 it carries the bar's bells, drawers and AI, in three groups
   with a clear gap and a hairline between them. */

.pos-dock {
    --dk-ink: #1d1d1f;
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1000;                 /* over the page, under dialogs (12500) and the lock (99999) */
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(246, 246, 248, .62) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 16px 40px rgba(29, 29, 31, .16),
                0 2px 8px rgba(29, 29, 31, .08),
                inset 0 1px 0 rgba(255, 255, 255, .9),
                inset 0 0 0 .5px rgba(29, 29, 31, .06);
    transition: opacity .2s ease, transform .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}

/* Room at the end of every page, so the last of it can scroll clear of the
   dock rather than end up underneath it. */
body::after { content: ""; display: block; height: 100px; }

/* Out of the way while the repair checkout's model menu is open: that menu
   runs down to the bottom of the window. */
body:has(#mpPanel:not([hidden])) .pos-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
}

/* The groups, and the gap between them: a hairline with room either side. */
.pos-dock-group { display: flex; align-items: center; gap: 4px; }
.pos-dock-sep {
    flex: none;
    width: 1px;
    height: 32px;
    margin: 0 14px;
    background: rgba(29, 29, 31, .14);
}

/* One place in the dock. */
.pos-dock-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    min-width: 60px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dk-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease;
}
/* The drawers are links, and the Apple theme paints every link blue
   (body.apple-mode a:not(…), apple.css) — this is one step stronger. */
html body .pos-dock a.pos-dock-item { color: var(--dk-ink); }
.pos-dock-item svg { flex: none; width: 30px; height: 30px; }
.pos-dock-item:hover { background: rgba(29, 29, 31, .06); }
.pos-dock-item:active { background: rgba(29, 29, 31, .12); }

/* The highlight that glides between the items under the pointer (motion.js,
   Luis, 2026-10-15): the hover tint above as one piece of frosted glass that
   travels, so an item's own tint steps aside for it. An alert keeps its red. */
.pm-glide.dk-glide {
    background: rgba(29, 29, 31, .065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
                inset 0 0 0 .5px rgba(29, 29, 31, .05);
}
.pos-dock.pm-track .pos-dock-item:not(.is-alert):hover { background: transparent; }
.pos-dock.pm-track .pos-dock-item:not(.is-alert):active { background: rgba(29, 29, 31, .07); }
.pos-dock-item:focus-visible { outline: 2px solid rgba(29, 29, 31, .45); outline-offset: 1px; }

/* The words beside a drawer, and the AI's. */
.pos-dock-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.pos-dock-words b {
    font-family: var(--font-ui, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--dk-ink);
    white-space: nowrap;
}
.pos-dock-words i {
    font-family: var(--font-ui, inherit);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    color: rgba(29, 29, 31, .5);
    white-space: nowrap;
}
.pos-dock-words i.is-online { color: #2f6152; }      /* in-house green: in service */
.pos-dock-words i.is-closed { color: #b3261e; }      /* closed out */
/* A drawer: its name and state first, its icon on the right (Luis,
   2026-10-15), the words set against the icon. */
.pos-dock-drawer { flex-direction: row-reverse; padding: 0 14px 0 18px; }
.pos-dock-drawer .pos-dock-words { align-items: flex-end; text-align: right; }
/* The bar's AI pill (its look and sparkles come from topbar.php), a size up to
   sit in the dock's row, with room either side of it. */
.pos-dock .pos-dock-aipill { height: 48px; padding: 0 20px 0 14px; gap: 7px; font-size: 18px; margin: 0 4px; }
.pos-dock .pos-dock-aipill .ai-spark { width: 28px; height: 28px; }

/* The counts, as on the bar: red for the bells, green or red on a drawer. */
.pos-dock-badge {
    position: absolute;
    top: 5px;
    left: 38px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .95);
    background: #e5484d;
    color: #fff;
    font-family: var(--font-ui, inherit);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}
.pos-dock-badge[hidden] { display: none; }
.pos-dock-badge.is-online { background: #3f7a68; }
.pos-dock-badge.is-closed { background: #b3261e; }
/* On a drawer the count rides the icon's top right corner, the icon being at
   the right end now. */
.pos-dock-drawer .pos-dock-badge { left: auto; right: 4px; }

/* The bells' names, above them. */
.pos-dock-item > .pos-pop { bottom: calc(100% + 14px); }

/* A small movement on hover, one for each bell, saying what it is (Luis,
   2026-10-15): the wrench turns a bolt, the barcode is scanned, the bell
   rings, the chat bubble pops. Once per hover, in the house curve. */
.dk-wrench:hover svg { animation: dkTwist .7s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
@keyframes dkTwist {
    0% { transform: rotate(0); }
    40% { transform: rotate(-30deg); }
    70% { transform: rotate(8deg); }
    100% { transform: rotate(0); }
}
.dk-barcode::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 2px;
    margin: -1px 0 0 -15px;
    border-radius: 2px;
    background: #e5484d;
    box-shadow: 0 0 6px rgba(229, 72, 77, .7);
    opacity: 0;
    pointer-events: none;
}
.dk-barcode:hover::after { animation: dkScan 1.1s ease-in-out; }
@keyframes dkScan {
    0% { opacity: 0; transform: translateY(-11px); }
    15% { opacity: 1; }
    50% { transform: translateY(11px); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-11px); }
}
.dk-bell:hover svg { animation: dkRing .8s ease-in-out; transform-origin: 50% 12%; }
@keyframes dkRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-7deg); }
    75% { transform: rotate(4deg); }
}
.dk-chat:hover svg { animation: dkPop .55s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
@keyframes dkPop {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.18) translateY(-3px); }
    100% { transform: scale(1) translateY(0); }
}

/* The bar's signals, copied by dock.php: Web Chat red while chats wait, a
   bell that shakes when something new comes in. */
.pos-dock-item.is-alert { background: #e5484d; color: #fff; animation: dkGlow 1.6s ease-out infinite; }
.pos-dock-item.is-alert:hover { background: #c93a3f; }
@keyframes dkGlow { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); } 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }
.pos-dock-item.is-shaking svg { animation: dkShake .6s ease-in-out 3; transform-origin: 50% 10%; }
@keyframes dkShake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-5deg); }
}

/* ── The bar's bells, drawers and AI live in the dock now (Luis, 2026-10-15:
   "now we can remove them from top bar"). HIDDEN, not removed: the dock's
   copies press these very buttons, read their badges and drawer words, and
   open their lists, and the scripts that feed them keep running. Deleting
   the markup would silently break the dock. */
.topbar .topbar-bells,
.topbar .topbar-drawer,
.topbar .topbar-right > .topbar-sep,
.topbar #aiChatBtn { display: none !important; }

/* A bar list opened from the dock (dock.php lifts it): above the dock,
   growing up from it rather than down from the bar. */
.notif-dropdown.dk-float {
    position: fixed;
    top: auto;
    right: auto;
    z-index: 1100;
    transform-origin: 50% 100%;
    transform: translateY(8px) scale(.97);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.notif-dropdown.dk-float.open { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pos-dock, .pos-dock-item { transition: none; }
    .pos-dock-item.is-alert, .pos-dock-item.is-shaking svg,
    .pos-dock-item:hover svg, .dk-barcode:hover::after { animation: none; }
}
/* Never on paper: the checkout prints its receipt from the page itself. */
@media print {
    .pos-dock { display: none !important; }
}