/* =============================================================================
   HYN Learning Companion Framework
   panel-toggle.css

   Classification : EXTERNAL PANEL TOGGLE UI
   Version        : 2.1.0
   Status         : PRODUCTION

   Source of Truth

   • HYN Learning Companion v2.0.0 Production Lock.
   • Existing Root Panel geometry remains unchanged.
   • Existing Panel Manager owns expand/collapse behaviour.
   • This file owns only the external Toggle presentation.

   Locked Visual Contract

   • Toggle remains outside the Root Panel DOM.
   • Toggle size is exactly 50 × 50 pixels.
   • Toggle shape is completely round.
   • Toggle displays only the official HYN logo.
   • Expanded state uses Docked Mode.
   • Docked Mode keeps 65% behind the Root Panel.
   • Docked Mode leaves 35% visible.
   • Docked Mode uses a faded visual state.
   • Collapsed state uses Floating Mode.
   • Floating Mode displays the full Toggle.
   • Hover and keyboard focus activate the multicolor double layer.
   • Root Panel width, height, padding and internal layout are untouched.
============================================================================= */


/* =============================================================================
   Panel Toggle Design Tokens
============================================================================= */

:root {

    /* =========================================================================
       Geometry
    ========================================================================= */

    --hyn-panel-toggle-size:
        50px;

    --hyn-panel-toggle-logo-size:
        40px;

    --hyn-panel-toggle-halo-width:
        3px;

    --hyn-panel-toggle-surface-size:
        42px;

    /* =========================================================================
    Root Panel Geometry Contract
    ========================================================================= */

    --hyn-panel-toggle-root-width:
        300px;

    --hyn-panel-toggle-root-height:
        600px;

    --hyn-panel-toggle-root-right:
        var(--hyn-space-6);

    --hyn-panel-toggle-root-top:
        var(--hyn-space-4);

    --hyn-panel-toggle-root-left-position:
        calc(
            100vw -
            var(--hyn-panel-toggle-root-right) -
            var(--hyn-panel-toggle-root-width)
        );


    /* =========================================================================
        Bottom Edge Center Alignment
    ========================================================================= */

    --hyn-panel-toggle-center-left:
        calc(
            var(--hyn-panel-toggle-root-left-position) +
            (var(--hyn-panel-toggle-root-width) / 2) -
            (var(--hyn-panel-toggle-size) / 2)
        );

    --hyn-panel-toggle-root-bottom:
        calc(
            100vh -
            var(--hyn-panel-toggle-root-top) -
            var(--hyn-panel-toggle-root-height)
        );
    /* =========================================================================
        Floating Viewport Position
    ========================================================================= */

    --hyn-panel-toggle-floating-bottom:
        max(
            20px,
            env(safe-area-inset-bottom)
        );

    /* =========================================================================
       Docking Geometry

       Toggle width: 50px
       Hidden:       65% = 32.5px
       Visible:      35% = 17.5px
    ========================================================================= */

    --hyn-panel-toggle-hidden-width:
        32.5px;

    --hyn-panel-toggle-visible-width:
        17.5px;

    --hyn-panel-toggle-hover-visible-width:
        22px;


    /* =========================================================================
       Root Panel Position Contract

       Source of Truth:
       Desktop Root Panel right offset = --hyn-space-6
       Laptop Root Panel right offset  = --hyn-space-5
       Tablet Root Panel right offset  = --hyn-space-4
    ========================================================================= */

    --hyn-panel-toggle-root-right:
        var(--hyn-space-6);

    --hyn-panel-toggle-root-top:
        var(--hyn-space-4);


    /* =========================================================================
       Vertical Alignment

       Root Panel height: 600px
       Toggle height:      50px

       (600px - 50px) / 2 = 275px
    ========================================================================= */

    --hyn-panel-toggle-top-offset:
        275px;

    --hyn-panel-toggle-top:
        calc(
            var(--hyn-panel-toggle-root-top) +
            var(--hyn-panel-toggle-top-offset)
        );


    /* =========================================================================
       Horizontal States
    ========================================================================= */

    --hyn-panel-toggle-floating-right:
        var(--hyn-panel-toggle-root-right);

    --hyn-panel-toggle-docked-right:
        calc(
            var(--hyn-panel-toggle-root-right) -
            var(--hyn-panel-toggle-visible-width)
        );

    --hyn-panel-toggle-hover-right:
        calc(
            var(--hyn-panel-toggle-root-right) -
            var(--hyn-panel-toggle-hover-visible-width)
        );


    /* =========================================================================
       Layering

       Toggle remains immediately below the official Root Panel layer.
    ========================================================================= */

    --hyn-panel-toggle-z-index:
        calc(
            var(--hyn-z-panel) - 1
        );


    /* =========================================================================
       Surfaces
    ========================================================================= */

    --hyn-panel-toggle-surface:
        var(--hyn-color-surface-primary);

    --hyn-panel-toggle-surface-hover:
        var(--hyn-color-surface-primary);

    --hyn-panel-toggle-inner-border:
        rgba(255, 255, 255, 0.92);


    /* =========================================================================
       Multicolor Halo
    ========================================================================= */

    --hyn-panel-toggle-halo-one:
        var(--hyn-color-primary);

    --hyn-panel-toggle-halo-two:
        #06b6d4;

    --hyn-panel-toggle-halo-three:
        #a855f7;

    --hyn-panel-toggle-halo-four:
        #f59e0b;


    /* =========================================================================
       Opacity
    ========================================================================= */

    --hyn-panel-toggle-opacity-docked:
        0.42;

    --hyn-panel-toggle-opacity-active:
        1;


    /* =========================================================================
       Scale
    ========================================================================= */

    --hyn-panel-toggle-scale-docked:
        0.96;

    --hyn-panel-toggle-scale-rest:
        1;

    --hyn-panel-toggle-scale-hover:
        1;

    --hyn-panel-toggle-scale-active:
        0.94;


    /* =========================================================================
       Elevation
    ========================================================================= */

    --hyn-panel-toggle-shadow:
        0 4px 14px
        rgba(15, 23, 42, 0.20);

    --hyn-panel-toggle-shadow-hover:
        0 8px 26px
        rgba(15, 23, 42, 0.30);

    --hyn-panel-toggle-halo-glow:
        0 0 18px
        rgba(37, 99, 235, 0.42);

    --hyn-panel-toggle-focus-ring:
        0 0 0 4px
        rgba(37, 99, 235, 0.30);


    /* =========================================================================
       Motion
    ========================================================================= */

    --hyn-panel-toggle-transition-duration:
        240ms;

    --hyn-panel-toggle-transition-fast:
        160ms;

    --hyn-panel-toggle-transition-easing:
        cubic-bezier(0.22, 1, 0.36, 1);

}


/* =============================================================================
   External Toggle Isolation

   The official framework reset is scoped inside .hyn-learning-companion.
   Because this Toggle is an external sibling, it requires its own reset.
============================================================================= */

.hyn-panel-toggle,
.hyn-panel-toggle *,
.hyn-panel-toggle *::before,
.hyn-panel-toggle *::after {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


/* =============================================================================
   Panel Toggle Root
============================================================================= */

.hyn-panel-toggle {

    position:
        fixed;

    left:
        var(--hyn-panel-toggle-center-left);

    bottom:
        var(--hyn-panel-toggle-root-bottom);

    right:
        auto;

    top:
        auto;

    z-index:
        var(--hyn-panel-toggle-z-index);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-panel-toggle-size);

    min-width:
        var(--hyn-panel-toggle-size);

    max-width:
        var(--hyn-panel-toggle-size);

    height:
        var(--hyn-panel-toggle-size);

    min-height:
        var(--hyn-panel-toggle-size);

    max-height:
        var(--hyn-panel-toggle-size);

    border:
        0;

    border-radius:
        50%;

    opacity:
        var(--hyn-panel-toggle-opacity-active);

    visibility:
        visible;

    pointer-events:
        auto;

    isolation:
        isolate;

    transform:
        translate3d(0, 0, 0)
        scale(
            var(--hyn-panel-toggle-scale-rest)
        );

    transform-origin:
        center;

    transition:
        left
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing),

        right
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing),

        bottom
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing),

        opacity
            var(--hyn-panel-toggle-transition-duration)
            ease,
            
        transform
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing);

}


/* =============================================================================
   Docked Mode

   Applied while the Root Panel is expanded.
============================================================================= */

.hyn-panel-toggle[data-toggle-mode="docked"] {

    left:
        var(--hyn-panel-toggle-center-left);

    bottom:
        calc(
            var(--hyn-panel-toggle-root-bottom) -
            var(--hyn-panel-toggle-hidden-width)
        );

    opacity:
        var(--hyn-panel-toggle-opacity-docked);

    transform:
        translate3d(0, 0, 0)
        scale(
            var(--hyn-panel-toggle-scale-docked)
        );

}


/* =============================================================================
   Docked Reveal

   The Toggle remains partially docked while becoming easier to identify.
============================================================================= */

.hyn-panel-toggle[data-toggle-mode="docked"]:hover,
.hyn-panel-toggle[data-toggle-mode="docked"]:focus-within {

    right:
        var(--hyn-panel-toggle-hover-right);

    opacity:
        var(--hyn-panel-toggle-opacity-active);

    transform:
        translate3d(0, 0, 0)
        scale(
            var(--hyn-panel-toggle-scale-hover)
        );

}


/* =============================================================================
   Floating Mode

   Applied while the Root Panel is collapsed.

   The Toggle moves to the viewport bottom-right corner and remains fully
   visible, accessible and interactive.
============================================================================= */

.hyn-panel-toggle[data-toggle-mode="floating"] {

    left:
        auto;

    right:
        max(
            20px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            20px,
            env(safe-area-inset-bottom)
        );

    z-index:
        calc(
            var(--hyn-z-panel) + 1
        );

    opacity:
        var(--hyn-panel-toggle-opacity-active);

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate3d(0, 0, 0)
        scale(
            var(--hyn-panel-toggle-scale-rest)
        );

}

/* =============================================================================
   Toggle Button
============================================================================= */

.hyn-panel-toggle-button {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-panel-toggle-size);

    min-width:
        var(--hyn-panel-toggle-size);

    max-width:
        var(--hyn-panel-toggle-size);

    height:
        var(--hyn-panel-toggle-size);

    min-height:
        var(--hyn-panel-toggle-size);

    max-height:
        var(--hyn-panel-toggle-size);

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    overflow:
        visible;

    appearance:
        none;

    -webkit-appearance:
        none;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;

    user-select:
        none;

    outline:
        none;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform
            var(--hyn-panel-toggle-transition-fast)
            var(--hyn-panel-toggle-transition-easing);

}


/* =============================================================================
   Outer Multicolor Halo Layer
============================================================================= */

.hyn-panel-toggle-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    display:
        block;

    border-radius:
        50%;

    background:
        conic-gradient(
            from 0deg,
            var(--hyn-panel-toggle-halo-one),
            var(--hyn-panel-toggle-halo-two),
            var(--hyn-panel-toggle-halo-three),
            var(--hyn-panel-toggle-halo-four),
            var(--hyn-panel-toggle-halo-one)
        );

    opacity:
        0.64;

    box-shadow:
        var(--hyn-panel-toggle-shadow);

    filter:
        saturate(1);

    transform:
        translate3d(0, 0, 0)
        scale(0.98)
        rotate(0deg);

    transform-origin:
        center;

    transition:
        opacity
            var(--hyn-panel-toggle-transition-duration)
            ease,
        box-shadow
            var(--hyn-panel-toggle-transition-duration)
            ease,
        filter
            var(--hyn-panel-toggle-transition-duration)
            ease,
        transform
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing);

    pointer-events:
        none;

}


/* =============================================================================
   Inner Surface Layer
============================================================================= */

.hyn-panel-toggle-button::after {

    content:
        "";

    position:
        absolute;

    inset:
        var(--hyn-panel-toggle-halo-width);

    z-index:
        1;

    display:
        block;

    border:
        1px solid
        var(--hyn-panel-toggle-inner-border);

    border-radius:
        50%;

    background:
        var(--hyn-panel-toggle-surface);

    box-shadow:
        inset 0 1px 1px
        rgba(255, 255, 255, 0.78);

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition:
        background-color
            var(--hyn-panel-toggle-transition-duration)
            ease,
        transform
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing);

    pointer-events:
        none;

}


/* =============================================================================
   Toggle Visual Layer
============================================================================= */

.hyn-panel-toggle-visual {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    border-radius:
        50%;

    pointer-events:
        none;

}


/* =============================================================================
   Toggle Surface
============================================================================= */

.hyn-panel-toggle-surface {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-panel-toggle-surface-size);

    min-width:
        var(--hyn-panel-toggle-surface-size);

    max-width:
        var(--hyn-panel-toggle-surface-size);

    height:
        var(--hyn-panel-toggle-surface-size);

    min-height:
        var(--hyn-panel-toggle-surface-size);

    max-height:
        var(--hyn-panel-toggle-surface-size);

    border:
        0;

    border-radius:
        50%;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =============================================================================
   Toggle Logo Container
============================================================================= */

.hyn-panel-toggle-logo-container {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    border:
        0;

    border-radius:
        50%;

    overflow:
        hidden;

    pointer-events:
        none;

}


/* =============================================================================
   Official HYN Logo
============================================================================= */

.hyn-panel-toggle-logo {

    display:
        block;

    width:
        var(--hyn-panel-toggle-logo-size);

    min-width:
        var(--hyn-panel-toggle-logo-size);

    max-width:
        var(--hyn-panel-toggle-logo-size);

    height:
        var(--hyn-panel-toggle-logo-size);

    min-height:
        var(--hyn-panel-toggle-logo-size);

    max-height:
        var(--hyn-panel-toggle-logo-size);

    border:
        0;

    background:
        transparent;

    object-fit:
        contain;

    object-position:
        center;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition:
        transform
            var(--hyn-panel-toggle-transition-duration)
            var(--hyn-panel-toggle-transition-easing);

}

.hyn-panel-toggle-logo-fallback {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .04em;

    color:
        currentColor;

}

.hyn-panel-toggle-logo-container.hyn-logo-unavailable .hyn-panel-toggle-logo {

    display:
        none;

}

.hyn-panel-toggle-logo-container.hyn-logo-unavailable .hyn-panel-toggle-logo-fallback {

    display:
        flex;

}


/* =============================================================================
   Pointer Hover
============================================================================= */

@media (hover: hover) and (pointer: fine) {

    .hyn-panel-toggle-button:hover::before {

        opacity:
            1;

        box-shadow:
            var(--hyn-panel-toggle-shadow-hover),
            var(--hyn-panel-toggle-halo-glow);

        filter:
            saturate(1.22)
            brightness(1.07);

        transform:
            translate3d(0, 0, 0)
            scale(1.07)
            rotate(12deg);

    }


    .hyn-panel-toggle-button:hover::after {

        background:
            var(--hyn-panel-toggle-surface-hover);

        transform:
            translate3d(0, 0, 0)
            scale(0.96);

    }


    .hyn-panel-toggle-button:hover
    .hyn-panel-toggle-logo {

        transform:
            translate3d(0, 0, 0)
            scale(1.04);

    }

}


/* =============================================================================
   Keyboard Focus
============================================================================= */

.hyn-panel-toggle-button:focus-visible {

    box-shadow:
        var(--hyn-panel-toggle-focus-ring);

}


.hyn-panel-toggle-button:focus-visible::before {

    opacity:
        1;

    box-shadow:
        var(--hyn-panel-toggle-shadow-hover),
        var(--hyn-panel-toggle-halo-glow);

    filter:
        saturate(1.20)
        brightness(1.06);

    transform:
        translate3d(0, 0, 0)
        scale(1.07)
        rotate(8deg);

}


.hyn-panel-toggle-button:focus-visible::after {

    transform:
        translate3d(0, 0, 0)
        scale(0.96);

}


/* =============================================================================
   Active State
============================================================================= */

.hyn-panel-toggle-button:active {

    transform:
        translate3d(0, 0, 0)
        scale(
            var(--hyn-panel-toggle-scale-active)
        );

}


/* =============================================================================
   Disabled State
============================================================================= */

.hyn-panel-toggle-button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.48;

    pointer-events:
        none;

}


.hyn-panel-toggle-button:disabled::before {

    filter:
        grayscale(1);

}


/* =============================================================================
   Laptop Alignment
============================================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {

    :root {

        --hyn-panel-toggle-root-right:
            var(--hyn-space-5);

    }

}


/* =============================================================================
   Tablet Alignment
============================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    :root {

        --hyn-panel-toggle-root-right:
            var(--hyn-space-4);

    }

}


/* =============================================================================
   Touch Interaction
============================================================================= */

@media (hover: none) and (pointer: coarse) {

    .hyn-panel-toggle[data-toggle-mode="docked"] {

        opacity:
            0.62;

    }


    .hyn-panel-toggle-button::before {

        opacity:
            0.82;

    }

}


/* =============================================================================
   Reduced Motion
============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .hyn-panel-toggle,
    .hyn-panel-toggle-button,
    .hyn-panel-toggle-button::before,
    .hyn-panel-toggle-button::after,
    .hyn-panel-toggle-logo {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }


    .hyn-panel-toggle-button:hover::before,
    .hyn-panel-toggle-button:focus-visible::before {

        transform:
            translate3d(0, 0, 0)
            scale(1.03);

    }

}


/* =============================================================================
   Forced Colors
============================================================================= */

@media (forced-colors: active) {

    .hyn-panel-toggle-button {

        border:
            2px solid
            ButtonText;

        background:
            ButtonFace;

        color:
            ButtonText;

        forced-color-adjust:
            auto;

    }


    .hyn-panel-toggle-button::before,
    .hyn-panel-toggle-button::after {

        display:
            none;

    }

}


/* =============================================================================
   Hidden Attribute Protection

   Normal runtime operation keeps the Toggle available.
   This rule exists only for controlled teardown or failure states.
============================================================================= */

.hyn-panel-toggle[hidden] {

    display:
        none !important;

}


/* =============================================================================
   Print Protection
============================================================================= */

@media print {

    .hyn-panel-toggle {

        display:
            none !important;

    }

}