/* =====================================================================
   Duobot in-page styles.
   1. the action chips that sit on each lesson node
   2. the floating dock (glass button plus expandable panel)
   No background gradients: flat translucent glass only.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. NODE CHIPS                                                      */
/*                                                                     */
/*  This used to be two raw 40px images (a photographic PNG gem and a  */
/*  flat SVG crown) stacked over the lesson bubble, so they never      */
/*  matched in size, weight or alignment. Both now live in the same    */
/*  27px glass chip and only the icon and accent colour differ.        */
/*  Blue runs the lesson, gold runs the titan.                         */
/* ------------------------------------------------------------------ */

.db-node-actions {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    z-index: 12;

    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.db-node-btn {
    pointer-events: auto;
    position: relative;
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;

    border: 1.5px solid var(--db-chip-accent, #1cb0f6);
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    color: var(--db-chip-accent, #1cb0f6);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
}

.db-node-btn svg { display: block; width: 100%; height: 100%; }

.db-node-btn:hover {
    transform: scale(1.2);
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.42),
        0 0 18px var(--db-chip-accent, #1cb0f6),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.db-node-btn:active { transform: scale(1.05); }

.db-node-btn.db-chip-start { --db-chip-accent: #1cb0f6; }
.db-node-btn.db-chip-titan { --db-chip-accent: #ffc800; }

.db-node-btn.is-queued { animation: db-chip-pulse 1.6s ease-in-out infinite; }

@keyframes db-chip-pulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 0 rgba(255, 200, 0, 0.5); }
    50%      { box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 8px rgba(255, 200, 0, 0); }
}

.db-node-btn::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 11px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);

    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    border-radius: 11px;

    background: #101a1f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);

    color: #f2f6f8;
    font-family: "din-round", "Nunito", ui-rounded, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    white-space: normal;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.db-node-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ------------------------------------------------------------------ */
/*  2. FLOATING DOCK                                                   */
/* ------------------------------------------------------------------ */

#duobot-dock {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 2147483000;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;

    font-family: "din-round", "Nunito", ui-rounded, system-ui, sans-serif;
}

/* --- the panel: one composited layer, one transition, no stagger --- */

#duobot-dock .db-dock-panel {
    transform-origin: bottom right;
    will-change: transform, opacity, clip-path;
    backface-visibility: hidden;
}

/*
   The panel morphs out of the button: a clip that starts as the button's
   own rounded square in the bottom right corner and opens to the whole
   panel (with room for its shadow), while the panel rises into place.
   Closing runs it backwards, quicker, and folds into the button again.
*/
#duobot-dock:not(.is-collapsed) .db-dock-panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    clip-path: inset(-40px round 40px);
    transition:
        clip-path 0.42s cubic-bezier(0.2, 0.9, 0.1, 1),
        transform 0.42s cubic-bezier(0.2, 0.9, 0.1, 1),
        opacity 0.12s linear,
        visibility 0s linear 0s;
}

#duobot-dock.is-collapsed .db-dock-panel {
    opacity: 0;
    transform: translateY(16px);
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(calc(100% - 52px) 0 0 calc(100% - 52px) round 26px);
    transition:
        clip-path 0.26s cubic-bezier(0.6, 0, 0.8, 0.3),
        transform 0.26s cubic-bezier(0.6, 0, 0.8, 0.3),
        opacity 0.1s linear 0.16s,
        visibility 0s linear 0.26s;
}

/*
   Every child keeps its own hover transition, which is what made the
   hotkey chips and the help circles fade out of step with the panel:
   losing hover at the same moment the panel closed started a second,
   slower animation on those elements. While the dock is moving, all
   child transitions are frozen so the panel travels as a single piece.
*/
#duobot-dock.is-collapsed .db-dock-panel *,
#duobot-dock.is-animating .db-dock-panel * {
    transition: none !important;
    animation: none !important;
}

/* --- the button --- */

.db-fab {
    position: relative;
    width: 66px;
    height: 66px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 0;
    flex: none;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    user-select: none;

    display: grid;
    place-items: center;

    /* default: automation OFF (grey state) */
    background: #46545c;
    --db-btn-edge: #333e45;
    box-shadow:
        0 5px 0 var(--db-btn-edge),
        0 10px 24px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.18);

    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.08s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.16s ease,
                background 0.25s ease;
}

/* Hover: light 30% press down animation */
.db-fab:hover {
    filter: brightness(1.05);
    transform: translateY(1.5px);
    box-shadow:
        0 3.5px 0 var(--db-btn-edge),
        0 8px 20px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.18);
}

/* Active: full 100% press down */
.db-fab:active {
    transform: translateY(5px);
    box-shadow:
        0 0 0 var(--db-btn-edge),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Default / OFF: Duo mascot is also grey */
.db-fab .db-fab-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
    grid-area: 1 / 1;
}

.db-fab .db-fab-img-normal {
    opacity: 1;
    filter: grayscale(100%) opacity(0.7) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.db-fab .db-fab-img-titan {
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Automation ON: Green state */
.db-fab.is-on {
    background: #58cc02;
    --db-btn-edge: #46a302;
    box-shadow:
        0 5px 0 var(--db-btn-edge),
        0 10px 24px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.12);
}

.db-fab.is-on:hover {
    box-shadow:
        0 3.5px 0 var(--db-btn-edge),
        0 8px 20px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.12);
}

.db-fab.is-on .db-fab-img-normal {
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.db-fab.is-on .db-fab-img-titan {
    opacity: 0;
}

/* Titan mode ON: Yellow/Gold state */
.db-fab.is-titan {
    background: #ffc800;
    --db-btn-edge: #c99b00;
    box-shadow:
        0 5px 0 var(--db-btn-edge),
        0 10px 24px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.12);
}

.db-fab.is-titan:hover {
    box-shadow:
        0 3.5px 0 var(--db-btn-edge),
        0 8px 20px rgba(0, 0, 0, 0.38),
        inset 0 2.5px 0 rgba(255, 255, 255, 0.48),
        inset 0 -2.5px 0 rgba(0, 0, 0, 0.12);
}

.db-fab.is-titan .db-fab-img-normal {
    opacity: 0;
}

.db-fab.is-titan .db-fab-img-titan {
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Chess: not supported yet, so the bot is off and the button says so */
.db-fab.is-chess {
    background: #ff4b4b;
    --db-btn-edge: #d33131;
}

.db-fab.is-chess .db-fab-img-normal {
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.db-fab.is-chess .db-fab-img-titan {
    opacity: 0;
}

.db-chess-note {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    width: 220px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ff4b4b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.db-fab.is-chess:hover .db-chess-note,
.db-fab.is-chess.show-note .db-chess-note {
    opacity: 1;
    visibility: visible;
}

/* No outline, no ring, no glow around button */
.db-fab::before {
    display: none !important;
}

/* completed-titan counter */
.db-fab-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffc800;
    border: 2px solid rgba(19, 31, 36, 0.9);
    color: #3d2c00;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease,
                transform 0.32s cubic-bezier(0.2, 1.4, 0.36, 1);
}

.db-fab-count.is-visible { opacity: 1; transform: scale(1); }

@media (max-width: 720px) {
    #duobot-dock { right: 16px; bottom: 16px; }
    #duobot-dock .db-root { width: min(380px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
    #duobot-dock *, .db-node-btn { transition: none !important; animation: none !important; }
}

/* the tab outlived an extension reload, see injected.js duobot_stale */
.db-stale {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    border: 2px solid #37464f;
    background: #131f24;
    color: #f1f7fb;
    font: 700 14px/1.3 "din-round", system-ui, sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.db-stale .db-btn { flex: none; width: auto; height: 36px; --db-green: #58cc02; }