.intent-hud__timer {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    overflow: hidden;
    margin-bottom: 5px;
}

.intent-hud {
    position: fixed; /* floats above page */
    z-index: 10000;
    min-width: 200px;
    max-width: 25vw;
    height: auto;
    width: auto; /* do NOT resize based on contents */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px gray, 0 0 4px 3px gray;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden; /* internal scrolling only */
    pointer-events: auto;
    opacity: 1;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 1000ms cubic-bezier(.22,.61,.36,1), opacity 150ms ease;
}
    /* TOP ROW */
    .intent-hud[data-huddock="top-left"] {
        transform: translate(-50vw, -50vh);
    }

    .intent-hud[data-huddock="top-center"] {
        transform: translate(-50%, -50vh);
    }

    .intent-hud[data-huddock="top-right"] {
        transform: translate(24vw, -50vh);
    }

    /* MIDDLE ROW */
    .intent-hud[data-huddock="middle-left"] {
        transform: translate(-50vw, -50%);
    }

    .intent-hud[data-huddock="middle-center"] {
        transform: translate(-50%, -50%);
    }

    .intent-hud[data-huddock="middle-right"] {
        transform: translate(24vw, -50%);
    }

@media(min-height:700px) {
    /* BOTTOM ROW */
    .intent-hud[data-huddock="bottom-left"] {
        transform: translate(-50vw, 27vh);
    }

    .intent-hud[data-huddock="bottom-center"] {
        transform: translate(-50%, 27vh);
    }

    .intent-hud[data-huddock="bottom-right"] {
        transform: translate(24vw, 27vh);
    }
}

@media(max-height:700px) and (min-height:400px) {
    /* BOTTOM ROW */
    .intent-hud[data-huddock="bottom-left"] {
        transform: translate(-50vw, -30%);
    }

    .intent-hud[data-huddock="bottom-center"] {
        transform: translate(-50%, -30%);
    }

    .intent-hud[data-huddock="bottom-right"] {
        transform: translate(24vw, -30%);
    }
}

@media(max-height:400px) {
    /* BOTTOM ROW */
    .intent-hud[data-huddock="bottom-left"] {
        transform: translate(-50vw,-50%);
    }

    .intent-hud[data-huddock="bottom-center"] {
        transform: translate(-50%, -50%);
    }

    .intent-hud[data-huddock="bottom-right"] {
        transform: translate(24vw, -50%);
    }

    .intent-dock-grid button[data-dock^="bottom"] {
        display: none;
    }
}

.intent-hud .intent-hud__message {
    margin-top: 6px;
    overflow-wrap: break-word;
    flex-shrink: 0;
}

.intent-hud .intent-hud__ui-scroll {
    margin-top: 6px;
    flex: 1 1 auto;
    overflow: auto; /* scrolls if content too large */
}

.intent-hud__timer-fill {
    position: absolute;
    right: 0; /* drains right → left */
    top: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(1);
    background: linear-gradient( 90deg, #2ecc71 0%, #6fffc1 40%, #2ecc71 50%, #6fffc1 60%, #2ecc71 100% );
    transform-origin: right center;
    transition-property: transform;
    transition-timing-function: linear;
}

    .intent-hud__timer-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.4), transparent );
        animation: shimmer 1.5s linear infinite;
    }

@keyframes shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.intent-dock-grid {
    display: grid;
    grid-template-columns: repeat(3, 12px);
    grid-template-rows: repeat(3, 12px);
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

    .intent-dock-grid button {
        all: unset;
        width: 12px;
        height: 12px;
        border-radius: 3px;
        background-color: lightgray;
        cursor: pointer;
        transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }

        .intent-dock-grid button:hover,
        .intent-dock-grid button:focus-visible {
            background-color: gray;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
        }

.intent-hud[data-huddock="top-left"] .intent-dock-grid button[data-dock="top-left"],
.intent-hud[data-huddock="top-center"] .intent-dock-grid button[data-dock="top-center"],
.intent-hud[data-huddock="top-right"] .intent-dock-grid button[data-dock="top-right"],
.intent-hud[data-huddock="middle-left"] .intent-dock-grid button[data-dock="middle-left"],
.intent-hud[data-huddock="middle-center"] .intent-dock-grid button[data-dock="middle-center"],
.intent-hud[data-huddock="middle-right"] .intent-dock-grid button[data-dock="middle-right"],
.intent-hud[data-huddock="bottom-left"] .intent-dock-grid button[data-dock="bottom-left"],
.intent-hud[data-huddock="bottom-center"] .intent-dock-grid button[data-dock="bottom-center"],
.intent-hud[data-huddock="bottom-right"] .intent-dock-grid button[data-dock="bottom-right"] {
    background-color: gray;
    box-shadow: 0 0 4px gray, 0 0 8px lightgray;
}

@media (max-height:400px) {
    .intent-hud[data-huddock="bottom-left"] .intent-dock-grid button[data-dock="middle-left"],
    .intent-hud[data-huddock="bottom-center"] .intent-dock-grid button[data-dock="middle-center"],
    .intent-hud[data-huddock="bottom-right"] .intent-dock-grid button[data-dock="middle-right"] {
        background-color: gray;
        box-shadow: 0 0 4px gray, 0 0 8px lightgray;
    }
}

.intent-hud[data-huddock^="top"] .intent-dock-grid {
    align-self: flex-start;
}

.intent-hud[data-huddock^="bottom"] .intent-dock-grid {
    align-self: flex-end;
}



@keyframes intentPulse {
    0% {
        box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.8), 0 0 10px 6px rgba(255, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(255, 0, 0, 1), 0 0 14px 8px rgba(255, 0, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.8), 0 0 10px 6px rgba(255, 0, 0, 0.4);
    }
}

.intent-speed-slider {
    width: 100%;
    margin-left: 5px;
}

.intent-hud__nav {
    display: grid;
    width: min-content;
    grid-template-columns: repeat(5, auto);
}

    .intent-hud__nav .intent-btn {
        width: 34px;
        height: 34px;
    }

@media (min-width: 1500px) {
    .intent-hud__controls {
        grid-template-columns: [nav] auto [speed] 1fr [dock] auto;
        align-items: center;
    }
}

@media (min-width: 1080px) and (max-width:1500px) {
    .intent-hud__controls {
    }
}

@media (max-width: 1080px) {
    .intent-hud__controls {
        grid-template-rows: [nav] auto [speed] auto [dock] auto;
    }
}

.intent-hud__controls {
    display: grid;
}

.intent-isactive {
    animation: intentPulse 1.6s ease-in-out infinite;
}

.intent-isactive-extra {
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 1), 0 0 14px 8px rgba(255, 0, 0, 0.6);
}