/* ============================================================
   toolbar-modern.css — the floating bottom toolbar (#pinnedBottomBar)
   and its quick icon drop-ups.

   Look: one clean surface, calm single-colour icons that show their own
   colour on hover, the selected tool marked by a soft accent tint + dot.
   Colours come from the theme tokens (--mt-bar, --mt-accent …), so every
   theme keeps its palette. js/tools/ToolbarSkin.js copies each icon's
   own colour into --ic.

   Loaded before modern-themes.css (which the head script appends), so
   rules use `html body #pinnedBottomBar …` + !important to win.
   Never sets `display` on buttons (student mode hides some by id).
   ============================================================ */

html body #pinnedBottomBar.pinned-bottom-bar {
    --tb-bg: var(--mt-bar, #1f2333);
    --tb-text: var(--mt-bar-text, #c3c9d6);
    --tb-strong: var(--mt-bar-strong, #ffffff);
    --tb-hover: var(--mt-bar-hover, rgba(255, 255, 255, .08));
    --tb-line: var(--mt-bar-line, rgba(255, 255, 255, .1));
    --tb-accent: var(--mt-accent, #6366f1);
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 16px !important;
    background-image: none !important;
    border: 1px solid var(--tb-line) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08),
        0 10px 30px -6px rgba(15, 23, 42, .30) !important;
}

html body #pinnedBottomBar .pinned-tools-container { gap: 2px !important; }
html body #pinnedBottomBar .pinned-tool-group { position: relative; flex-shrink: 0 !important; }

/* ── buttons ─────────────────────────────────────────────── */
html body #pinnedBottomBar .tool-btn {
    position: relative;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--tb-text) !important;
    flex-shrink: 0 !important;
    transition: background .15s ease, color .15s ease !important;
}
/* calm icons: one colour; the pen icon keeps showing the ink colour */
html body #pinnedBottomBar .tool-btn i:not(#pinned-active-pen-icon) {
    color: var(--tb-text) !important;
    transition: color .15s ease, transform .15s ease;
}
html body #pinnedBottomBar .tool-btn:hover { background: var(--tb-hover) !important; }
html body #pinnedBottomBar .tool-btn:hover i:not(#pinned-active-pen-icon, .group-caret) {
    color: var(--ic, var(--tb-strong)) !important;
    transform: scale(1.08);
}
html body #pinnedBottomBar .tool-btn:active { transform: scale(.94); }
html body #pinnedBottomBar .tool-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--tb-accent) !important;
}

/* selected tool: soft accent tint + a small dot underneath */
html body #pinnedBottomBar .tool-btn.active {
    background: color-mix(in srgb, var(--tb-accent) 18%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tb-accent) 35%, transparent) !important;
}
html body #pinnedBottomBar .tool-btn.active i:not(#pinned-active-pen-icon, .group-caret) { color: var(--tb-accent) !important; }
html body #pinnedBottomBar .tool-btn.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--tb-accent);
}
html body #pinnedBottomBar :is(#pinned-undo, #pinned-redo):disabled { opacity: .35; }

/* drop-up triggers: a tiny caret in the corner */
html body #pinnedBottomBar .group-trigger .group-caret {
    position: absolute;
    right: 3px;
    top: 3px;
    margin: 0 !important;
    font-size: 7px !important;
    opacity: .45;
    color: var(--tb-text) !important;
}
html body #pinnedBottomBar .group-trigger.open:not(.active) { background: var(--tb-hover) !important; }
html body #pinnedBottomBar .group-trigger.open .group-caret { opacity: .9; }

/* select split button: its arrow becomes the same corner caret */
html body #pinnedBottomBar .select-split-wrap { position: relative; flex-shrink: 0 !important; }
html body #pinnedBottomBar .select-arrow-btn.pinned-arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 15px !important;
    height: 15px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 10px 0 6px !important;
    font-size: 7px !important;
    opacity: .5;
    color: var(--tb-text) !important;
    background: transparent !important;
    z-index: 1;
}
html body #pinnedBottomBar .select-arrow-btn.pinned-arrow:hover { opacity: 1; background: var(--tb-hover) !important; }

/* dividers */
html body #pinnedBottomBar .divider {
    width: 1px !important;
    height: 22px !important;
    margin: 0 6px !important;
    background: var(--tb-line) !important;
    flex-shrink: 0 !important;
}

/* pen size tile */
html body #pinnedBottomBar .pinned-size-box {
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 6px !important;
    border-radius: 7px !important;
    border: 1.5px solid var(--tb-line) !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* current colour: a round swatch with a ring */
html body #pinnedBottomBar .active-color-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 7px !important;
    border-radius: 50% !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 2px var(--tb-bg), 0 0 0 3.5px var(--tb-line) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
html body #pinnedBottomBar .active-color-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--tb-bg), 0 0 0 3.5px var(--tb-accent) !important;
}

/* right end: minimise + close */
html body #pinnedBottomBar .pinned-actions {
    margin-left: 2px !important;
    padding-left: 6px !important;
    border-left: 1px solid var(--tb-line) !important;
    gap: 0;
}
html body #pinnedBottomBar .pinned-actions .tool-btn,
html body #pinnedBottomBar .unpin-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    background: transparent !important;
    color: var(--tb-text) !important;
    opacity: .65;
}
html body #pinnedBottomBar .pinned-actions .tool-btn:hover { opacity: 1; background: var(--tb-hover) !important; }
html body #pinnedBottomBar .unpin-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, .14) !important;
    color: #ef4444 !important;
}

/* ── quick icon drop-ups (some are moved to <body>, so not scoped to the bar) ── */
html body .pinned-tool-dropdown,
html body #pinned-select-dropdown {
    padding: 5px !important;
    gap: 2px !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 14px !important;
    border: 1px solid var(--mt-bar-line, rgba(255, 255, 255, .1)) !important;
    background-color: var(--mt-bar, #1f2333) !important;
    background-image: none !important;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .4), 0 2px 6px rgba(15, 23, 42, .12) !important;
}
html body .pinned-tool-dropdown::after { border-top-color: var(--mt-bar, #1f2333) !important; }
html body .pinned-tool-dropdown .tool-btn,
html body #pinned-select-dropdown .tool-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background .12s ease !important;
}
html body .pinned-tool-dropdown .tool-btn i { color: var(--mt-bar-text, #c3c9d6) !important; transition: color .12s ease; }
html body .pinned-tool-dropdown .tool-btn:hover { background: var(--mt-bar-hover, rgba(255, 255, 255, .08)) !important; }
html body .pinned-tool-dropdown .tool-btn:hover i { color: var(--ic, var(--mt-bar-strong, #fff)) !important; }
html body .pinned-tool-dropdown .tool-btn.active { background: color-mix(in srgb, var(--mt-accent, #6366f1) 18%, transparent) !important; }
html body .pinned-tool-dropdown .tool-btn.active i { color: var(--mt-accent, #6366f1) !important; }

/* phones / touch: the row scrolls; keep the small tiles small */
@media (max-width: 760px) {
    html body #pinnedBottomBar .tool-btn { width: 36px !important; height: 36px !important; font-size: 15px !important; }
    html body #pinnedBottomBar .divider { margin: 0 4px !important; }
}
body.touch-device #pinnedBottomBar .pinned-size-box { width: 30px !important; height: 30px !important; }

/* ============================================================
   Clock notch at the top (#presence-notch) — same calm skin as the
   bottom toolbar: theme bar colour, thin border, soft shadow,
   clean clock · date · Marks.
   ============================================================ */
html body #presence-notch.presence-notch {
    --tb-text: var(--mt-bar-text, #c3c9d6);
    --tb-strong: var(--mt-bar-strong, #ffffff);
    --tb-hover: var(--mt-bar-hover, rgba(255, 255, 255, .08));
    --tb-line: var(--mt-bar-line, rgba(255, 255, 255, .1));
    --tb-accent: var(--mt-accent, #6366f1);
    padding: calc(7px + var(--safe-top, 0px)) 8px 7px 18px !important;
    gap: 10px;
    align-items: center;
    border-radius: 0 0 16px 16px !important;
    border: 1px solid var(--tb-line) !important;
    border-top: 0 !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 10px 26px -8px rgba(15, 23, 42, .30) !important;
}
html body #presence-notch .status-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--tb-text) !important;
}
/* the clock script paints its own glowing colour — keep it calm */
html body #presence-notch #digital-clock {
    color: var(--tb-strong) !important;
    -webkit-text-fill-color: var(--tb-strong) !important;
    text-shadow: none !important;
    font: 700 17px/1 'Outfit', 'Cairo', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
html body #presence-notch .notch-divider {
    display: inline-block;
    width: 1px !important;
    height: 16px;
    font-size: 0 !important;
    color: transparent !important;
    background: var(--tb-line) !important;
}
html body #presence-notch #digital-date {
    color: var(--tb-text) !important;
    -webkit-text-fill-color: var(--tb-text) !important;
    font: 500 13.5px/1 'Outfit', 'Cairo', system-ui, sans-serif !important;
    opacity: .9;
}
/* Marks: a soft accent-tinted chip, like the selected tool in the toolbar */
html body #presence-notch .ct-tab.ct-notch-tab {
    margin-inline-start: 4px;
    min-height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--tb-accent) 30%, transparent) !important;
    background: color-mix(in srgb, var(--tb-accent) 14%, transparent) !important;
    color: var(--tb-strong) !important;
    font: 600 12.5px/1 'Outfit', 'Cairo', system-ui, sans-serif;
    letter-spacing: .01em;
}
html body #presence-notch .ct-tab.ct-notch-tab .ct-b-icon { color: var(--tb-accent) !important; opacity: 1; }
html body #presence-notch .ct-tab.ct-notch-tab:hover { background: color-mix(in srgb, var(--tb-accent) 24%, transparent) !important; }
html body #presence-notch .ct-tab.ct-notch-tab.ct-tab-open { background: var(--tb-accent) !important; border-color: var(--tb-accent) !important; color: var(--mt-accent-ink, #fff) !important; box-shadow: none; }
html body #presence-notch .ct-tab.ct-notch-tab.ct-tab-open .ct-b-icon { color: var(--mt-accent-ink, #fff) !important; }

/* previous / next student arrows */
html body #presence-notch .presence-nav-arrows button {
    width: 28px; height: 28px;
    border-radius: 8px !important;
    color: var(--tb-text) !important;
}
html body #presence-notch .presence-nav-arrows button:hover { background: var(--tb-hover) !important; color: var(--tb-strong) !important; }

/* Go Live: a neat rounded chip instead of the big green capsule */
html body #presence-notch #btn-live-session {
    margin-left: 4px !important;
    padding: 0 12px !important;
    min-height: 30px;
    border-radius: 10px !important;
    font: 700 12px/1 'Outfit', 'Cairo', system-ui, sans-serif !important;
    letter-spacing: .03em;
}

@media (max-width: 640px) {
    html body #presence-notch.presence-notch { padding: calc(6px + var(--safe-top, 0px)) 6px 6px 12px !important; }
    html body #presence-notch #digital-clock { font-size: 14px !important; }
    html body #presence-notch #digital-date { font-size: 12px !important; }
    html body #presence-notch .status-info { gap: 8px; }
}
html body #presence-notch :is(#digital-clock, #digital-date) { white-space: nowrap; }

/* ── slide arrows + counter (right end of the bar) ── */
html body #pinnedBottomBar .tb-slide-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin-right: 4px;
    border-radius: 12px;
    background: var(--tb-hover);
    flex-shrink: 0;
}
html body #pinnedBottomBar .tb-nav-btn,
html body #pinnedBottomBar .tb-slide-count {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--tb-strong) !important;
    -webkit-text-fill-color: var(--tb-strong) !important;
    -webkit-tap-highlight-color: transparent;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0;
}
html body #pinnedBottomBar .tb-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
html body #pinnedBottomBar .tb-nav-btn:hover { background: color-mix(in srgb, var(--tb-accent) 22%, transparent) !important; }
html body #pinnedBottomBar .tb-nav-btn:active { transform: scale(.9); }
html body #pinnedBottomBar .tb-nav-btn.tb-dim { opacity: .35; }
html body #pinnedBottomBar .tb-nav-btn i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html body #pinnedBottomBar .tb-slide-count {
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    font: 700 14px/1 'Outfit', 'Cairo', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
html body #pinnedBottomBar .tb-slide-count small {
    font-weight: 500;
    font-size: 12px;
    opacity: .6;
    -webkit-text-fill-color: currentColor !important;
}
html body #pinnedBottomBar .tb-slide-count:hover { background: var(--tb-hover) !important; }
/* right-to-left: "next" points left */
html[dir="rtl"] body #pinnedBottomBar .tb-nav-btn i { transform: scaleX(-1); }
html[dir="rtl"] body #pinnedBottomBar .tb-slide-nav { margin-right: 0; margin-left: 4px; }