/* Class Tracker host (js/tools/ClassTrackerBridge.js)
 * Quick marks / Attendance: thin panel on the right that can hide into a small circle.
 * The host sits outside <body> so the app's body zoom does not shrink it: 100vw/100vh are real here.
 * Full page for the tracker; Quick marks and Attendance slide in as a panel on the right. */
.ct-host {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483000; /* below the Class Roster (2147483641) so it can open on top */
    background: #f6f7fd;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease, width .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
}
.ct-host.ct-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .22s ease, transform .22s ease, width .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.ct-host.ct-panel {
    width: min(380px, 100vw);
    transform: translateX(100%);
    border-left: 1px solid rgba(80, 90, 160, .14);
    box-shadow: -18px 0 48px rgba(27, 31, 59, .22);
}
.ct-host.ct-panel.ct-visible { transform: none; }
/* hidden into the circle: slid off-screen but still running (the voice assistant keeps working) */
.ct-host.ct-panel.ct-visible.ct-min { transform: translateX(105%); pointer-events: none; box-shadow: none; }
.ct-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}
.ct-host.ct-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 3px solid rgba(111, 107, 232, .2);
    border-top-color: #6f6be8;
    animation: ct-spin .8s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
/* full-page tracker: stop the board scrolling underneath */
html.ct-open body { overflow: hidden; }
/* the floating "Install app" button would sit on top of the tracker */
html.ct-shown #pwa-floating-install { display: none !important; }

/* ── the hidden panel's tab: sits in the board's right-edge tab group and looks like those tabs ── */
.nav-tab.ct-tab { display: none; color: #6f6be8; }
.nav-tab.ct-tab.ct-b-on { display: flex; }
.ct-tab .ct-b-icon { font-size: 14px; transition: transform .2s ease; }
/* the Quick marks panel is showing: same look as the active tab in the group */
.nav-tab.ct-tab.ct-tab-open {
    width: 40px;
    height: 48px;
    margin: -2px 0;
    opacity: 1;
    background: var(--bg-surface-solid, #fff);
    border-left: 4px solid #6f6be8 !important;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 50;
}
/* ── the tracker tab alone slides onto the edge of an open side panel (the other tabs stay in place).
      While beside a panel it is lifted out of the group so it shows above every panel layer. ── */
.nav-tab.ct-tab.ct-tab-lifted {
    position: fixed;
    top: var(--ct-top);
    right: var(--ct-right, 0);
    width: var(--ct-w, 28px);
    height: var(--ct-h, 44px);
    margin: 0;
    z-index: 2147483001;            /* above the side panels and the tracker panel, below the Class Roster */
    opacity: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bg-surface-solid, #fff);
    color: #6f6be8;
    border: 1px solid rgba(80, 90, 160, .16);
    border-right: 0;
    border-radius: 6px 0 0 6px !important;
    box-shadow: -6px 4px 18px rgba(61, 64, 91, .25) !important;
    /* set every frame from the panel's edge, so it sticks to it (no smoothing of its own = no lag) */
    transform: translateX(var(--ct-x, 0px));
    transition: background .25s ease;
    will-change: transform;
}
.nav-tab.ct-tab.ct-tab-lifted:hover { width: calc(var(--ct-w, 28px) + 6px); }
.nav-tab.ct-tab.ct-tab-lifted.ct-tab-open { border-left: 4px solid #6f6be8 !important; }
/* ── every right-side panel slides at the same speed and curve, so the tracker tab moves with each one
      the same way (AI, Web search, Quran, Slides, Chat and the tracker's own panel) ── */
:root { --side-panel-slide: .32s cubic-bezier(.22, 1, .36, 1); }
/* `html body …` outranks the themes (bakery-theme.css loads last and forces its own transition on these) */
html body .ai-sidebar, html body .search-sidebar, html body .quran-sidebar {
    transition: transform var(--side-panel-slide), width var(--side-panel-slide), right var(--side-panel-slide), opacity .2s ease !important;
}
html body #slidePanelSidebar, html body .slide-panel-sidebar {
    transition: transform var(--side-panel-slide), width var(--side-panel-slide) !important;
}
html body .chat-slider { transition: right var(--side-panel-slide), transform var(--side-panel-slide) !important; }
.ct-host.ct-panel, .ct-host.ct-panel.ct-visible {
    transition: opacity .2s ease, transform var(--side-panel-slide), width var(--side-panel-slide), visibility 0s !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .ai-sidebar, html body .search-sidebar, html body .quran-sidebar, html body #slidePanelSidebar, html body .slide-panel-sidebar, html body .chat-slider, .ct-host.ct-panel { transition: none !important; }
}
/* ── every tab in the board's right-edge group (My Library, View, Slides, Class Tracker) animates the same way ── */
#navSystem .nav-tab > i, #navSystem .nav-tab > span, #navSystem .nav-tab > small { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
#navSystem .nav-tab:hover > i, #navSystem .nav-tab:hover > span { transform: scale(1.15); }
#navSystem .nav-tab:active { transform: scale(.94); }
#navSystem .nav-tab.active > i, #navSystem .nav-tab.ct-tab-open > i { animation: ct-tab-pop .45s ease; }
/* a thin bar slides in on the tab's edge when you point at it (the tracker tab uses it for the AI status) */
#navSystem .nav-tab:not(.ct-tab)::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: currentColor;
    opacity: 0;
    transform: scaleY(0);
    transition: transform .25s ease, opacity .25s ease;
}
#navSystem .nav-tab:not(.ct-tab):not(.active):hover::before { opacity: .45; transform: scaleY(1); }
.nav-tab.ct-tab:not(.ct-b-listen):not(.ct-b-work):not(.ct-b-done):hover::before { background: #6f6be8; opacity: .45; }
@keyframes ct-tab-pop { 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
    #navSystem .nav-tab, #navSystem .nav-tab *, #navSystem .nav-tab::before { transition: none !important; animation: none !important; }
}
.ct-tab:focus-visible { outline: 2px solid #6f6be8; outline-offset: 2px; }
/* status bar on the tab's edge: red while listening (follows the voice), running colours while the AI works */
.ct-tab::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background: transparent;
    transition: background .2s ease, transform .08s linear;
}
.ct-tab.ct-b-listen, .ct-tab.ct-b-work, .ct-tab.ct-b-done, .ct-tab.ct-b-error { opacity: 1 !important; }
.ct-tab.ct-b-listen { color: #e5484d !important; }
.ct-tab.ct-b-listen::before { background: #e5484d; transform: scaleY(calc(.35 + var(--ct-level, 0) * .65)); animation: ct-blink 1s ease-in-out infinite; }
.ct-tab.ct-b-work { color: #6f6be8 !important; }
.ct-tab.ct-b-work::before { background: linear-gradient(#fbbf24, #f472b6, #a78bfa, #6aa5ff, #fbbf24) 0 0 / 100% 300%; animation: ct-flow 1s linear infinite; }
.ct-tab.ct-b-work .ct-b-icon { animation: ct-think 1.2s ease-in-out infinite; }
.ct-tab.ct-b-done:not(.ct-b-error):not(.ct-b-work):not(.ct-b-listen) { color: #22a06b !important; }
.ct-tab.ct-b-done:not(.ct-b-error):not(.ct-b-work):not(.ct-b-listen)::before { background: #2fb585; }
.ct-tab.ct-b-error:not(.ct-b-work):not(.ct-b-listen) { color: #e5484d !important; animation: ct-shake .4s ease; }
@keyframes ct-blink { 50% { opacity: .45; } }
@keyframes ct-flow { to { background-position: 0 100%; } }
@keyframes ct-think { 50% { transform: scale(.8); } }
@keyframes ct-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
/* a page without the tab group: the same tab alone on the right edge */
.ct-tab.ct-float {
    position: fixed; right: 0; top: 40%; z-index: 2147483001;
    width: 28px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
    background: #fff; border: 1px solid rgba(80, 90, 160, .14); border-right: 0;
    border-radius: 6px 0 0 6px; box-shadow: -4px 4px 14px rgba(61, 64, 91, .13); opacity: .85;
}
.ct-tab.ct-float:hover { width: 36px; opacity: 1; }
/* what the assistant is doing / said, to the left of the tab */
.ct-b-say {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    max-width: 240px;
    width: max-content;
    padding: 7px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .97);
    color: #2f3557;
    font: 600 12.5px/1.35 'Outfit', 'Cairo', system-ui, sans-serif;
    text-align: start;
    box-shadow: 0 8px 24px rgba(27, 31, 59, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    unicode-bidi: plaintext;
}
.ct-tab.ct-b-said .ct-b-say { opacity: 1; transform: translateY(-50%); }
.ct-tab.ct-b-error .ct-b-say { color: #c2283b; }

@media (prefers-reduced-motion: reduce) {
    .ct-host, .ct-host.ct-visible { transition: none; }
    .ct-tab, .ct-tab::before, .ct-tab * { animation: none !important; }
}

/* ── the tracker tab as a "Marks" pill in the clock notch, on the clock's right (Oct 10 2026) ──
      It no longer slides with side panels. It takes the notch's own text colour, so it suits every theme. */
.ct-b-label { display: none; }
.ct-tab.ct-notch-tab {
    position: relative;
    display: none;
    align-items: center;
    gap: 7px;
    margin-inline-start: 6px;
    padding: 5px 12px 5px 10px;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
    white-space: nowrap;
    font: 700 .78rem/1 'Outfit', 'Cairo', system-ui, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.presence-notch .ct-tab.ct-notch-tab { color: inherit; }
.ct-tab.ct-notch-tab.ct-b-on { display: inline-flex; }
.ct-tab.ct-notch-tab .ct-b-label { display: inline; }
.ct-tab.ct-notch-tab .ct-b-icon { font-size: 12px; color: inherit; opacity: .9; }
.ct-tab.ct-notch-tab:hover { background: color-mix(in srgb, currentColor 16%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ct-tab.ct-notch-tab:active { transform: scale(.95); }
.ct-tab.ct-notch-tab.ct-tab-open {
    background: #6f6be8;
    border-color: #6f6be8;
    color: #fff;
    box-shadow: 0 4px 14px rgba(111, 107, 232, .45);
}
.ct-tab.ct-notch-tab.ct-tab-open .ct-b-icon { color: #fff; }
/* the AI status: a small dot before the icon instead of the edge bar */
.ct-tab.ct-notch-tab::before {
    position: static; order: -1; flex: none;
    width: 7px; height: 7px; border-radius: 50%;
    display: none;
}
.ct-tab.ct-notch-tab.ct-b-listen::before, .ct-tab.ct-notch-tab.ct-b-work::before,
.ct-tab.ct-notch-tab.ct-b-done::before, .ct-tab.ct-notch-tab.ct-b-error::before { display: block; transform: none; }
.ct-tab.ct-notch-tab.ct-b-error::before { background: #e5484d; }
.ct-tab.ct-notch-tab.ct-b-listen { color: #ff8a8e !important; }
.ct-tab.ct-notch-tab.ct-b-done:not(.ct-b-error):not(.ct-b-work):not(.ct-b-listen) { color: #4fd1a1 !important; }
/* what the assistant is doing / said: pops out to the RIGHT of the pill, under the notch's edge */
.ct-tab.ct-notch-tab .ct-b-say {
    right: auto;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    z-index: 5;
    text-transform: none;
    letter-spacing: 0;
}
.ct-tab.ct-notch-tab.ct-b-said .ct-b-say { transform: translateY(-50%); }
body.touch-device .ct-tab.ct-notch-tab { min-height: 34px; padding-inline: 12px 14px; }
@media (max-width: 380px) {
    .ct-tab.ct-notch-tab .ct-b-label { display: none; }
    .ct-tab.ct-notch-tab { padding: 6px 9px; }
}