/* ============================================
   MODERN CSS FEATURES — Progressive Enhancement
   Leverages: @property, container queries,
   scroll-driven animations, color-mix(),
   text-wrap: balance, interpolate-size,
   light-dark(), CSS nesting, field-sizing.
   ============================================ */

/* ─── 1. Typed CSS Variables (@property) ── */
/* Enables smooth animation of custom props  */

@property --brand-hue {
    syntax: '<number>';
    initial-value: 239;
    inherits: true;
}

@property --glow-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

@property --card-lift {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}

@property --shimmer-x {
    syntax: '<percentage>';
    initial-value: -100%;
    inherits: false;
}

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: false;
}

@property --progress-value {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

/* ─── 2. interpolate-size ──────────────── */
/* Allow smooth height: auto transitions     */

:root {
    interpolate-size: allow-keywords;
}

/* ─── 3. text-wrap: balance ────────────── */
/* Better heading line distribution          */

header div,
.bot-section-title,
.bm-modal-header h3,
.bot-nav-title,
.bot-config-label,
.pr-hero-title,
h1, h2, h3 {
    text-wrap: balance;
}

.bot-action-desc,
.bm-template-preview,
.bot-empty p,
.cfg-hint {
    text-wrap: pretty;
}

/* ─── 4. Container Queries ─────────────── */
/* Components respond to parent, not viewport */

.bot-nav-grid {
    container-type: inline-size;
    container-name: bot-nav;
}

@container bot-nav (max-width: 600px) {
    .bot-nav-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .bot-nav-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .bot-nav-title { font-size: 0.82rem; }
    .bot-nav-desc { display: none; }
}

.bm-grid {
    container-type: inline-size;
    container-name: template-grid;
}

@container template-grid (max-width: 400px) {
    .bm-template-card {
        .bm-template-footer {
            flex-direction: column;
            gap: 4px;
        }
        .bm-template-vars {
            flex-wrap: nowrap;
            overflow-x: auto;
        }
    }
}

.bot-status-row {
    container-type: inline-size;
    container-name: status-row;
}

@container status-row (max-width: 520px) {
    .bot-card-body {
        padding: 14px;
        gap: 10px;
    }
    .bot-schedule-number {
        font-size: 1.6rem;
    }
}

.bot-analytics-row {
    container-type: inline-size;
    container-name: analytics;
}

@container analytics (max-width: 480px) {
    .bot-metric-card {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .bot-metric-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ─── 5. Scroll-Driven Animations ──────── */
/* Cards animate into view on scroll         */

@supports (animation-timeline: view()) {
    .bot-nav-card,
    .bm-template-card,
    .bot-metric-card,
    .kb-card {
        animation: scrollFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    .bot-card,
    .bot-config-panel,
    .bot-activity-panel {
        animation: scrollSlideIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    .str-section,
    .cfg-card,
    .cat-card,
    .lvl-section,
    .icon-grid {
        animation: scrollFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }
}

@keyframes scrollFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scrollSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ─── 6. Enhanced Card Hover via @property  */
/* Animated glow that transitions smoothly   */

.bot-nav-card,
.bm-template-card,
.bot-metric-card,
.cat-card,
.kb-card {
    --glow-opacity: 0;
    --card-lift: 0px;
    transition:
        --glow-opacity var(--duration) var(--ease),
        --card-lift var(--duration) var(--ease-spring),
        border-color var(--duration) var(--ease);
    transform: translateY(var(--card-lift));
    box-shadow: 0 0 0 0 transparent,
                0 0 calc(24px * var(--glow-opacity)) color-mix(in srgb, var(--brand) calc(var(--glow-opacity) * 25%), transparent);
}

.bot-nav-card:hover,
.bm-template-card:hover,
.bot-metric-card:hover,
.cat-card:hover,
.kb-card:hover {
    --glow-opacity: 1;
    --card-lift: -4px;
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ─── 7. color-mix() Enhancements ──────── */
/* Dynamic color blending without hardcoding */

.bm-badge {
    background: color-mix(in srgb, var(--badge-color, var(--brand)) 14%, transparent);
    color: var(--badge-color, var(--brand));
}

.bm-chip:hover {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border-color: var(--brand);
    color: var(--brand);
}

.bm-chip.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--brand) 35%, transparent);
}

.bot-preset:hover {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.bot-preset.active {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* Status badges with color-mix */
.bm-status-active {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.bm-status-inactive {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* ─── 8. Animated Gradient Border ──────── */
/* Bot dashboard header accent stripe        */

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.bot-section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.2em;
    border-radius: 2px;
    background: linear-gradient(
        var(--gradient-angle),
        var(--brand),
        color-mix(in srgb, var(--brand) 50%, var(--info)),
        var(--brand)
    );
    animation: rotateGradient 3s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes rotateGradient {
    to { --gradient-angle: 360deg; }
}

/* ─── 9. Shimmer Loading Effect ────────── */
/* Skeleton loading using @property          */

.bot-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--brand) 5%, transparent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmerSlide 2s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes shimmerSlide {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ─── 10. CSS Nesting for Bot Components ── */
/* Cleaner structure for modal / form states  */

.bm-modal {
    & .bm-modal-header {
        & h3 {
            display: flex;
            align-items: center;
            gap: 10px;

            & i {
                transition: transform var(--duration) var(--ease-spring);
            }
        }

        &:hover h3 i {
            transform: rotate(-8deg) scale(1.1);
        }
    }

    & .bm-modal-body {
        scrollbar-gutter: stable;

        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--text-muted) 40%, transparent);
            border-radius: var(--radius-full);
        }
    }
}

/* ─── 11. Enhanced Toggle Animation ──────  */
/* Spring bounce for bot toggles             */

.bm-toggle-thumb {
    transition: transform var(--duration) var(--ease-spring),
                box-shadow var(--duration) var(--ease);
}

.bm-toggle:hover .bm-toggle-thumb {
    box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 40%, transparent);
}

.bm-toggle-on:hover .bm-toggle-thumb {
    box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 50%, transparent);
}

/* ─── 12. Focus-visible Improvements ───── */
/* Keyboard-only focus rings                 */

.bot-btn:focus-visible,
.bot-btn-outline:focus-visible,
.bm-input:focus-visible,
.bm-textarea:focus-visible,
.bm-toggle:focus-visible,
.bm-chip:focus-visible,
.bot-nav-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ─── 13. Collapsible Smooth Height ──────  */
/* interpolate-size lets auto height animate */

.str-section-body,
.cfg-card-body,
.lvl-section {
    transition: height var(--duration-slow) var(--ease),
                opacity var(--duration) var(--ease);
}

.str-collapsed .str-section-body {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ─── 14. Improved Input Fields ────────── */
/* field-sizing for auto-grow textareas      */

@supports (field-sizing: content) {
    .bm-textarea,
    .str-textarea {
        field-sizing: content;
        min-height: 72px;
        max-height: 300px;
    }
}

/* ─── 15. Subgrid for Form Layouts ──────── */
/* Align labels and inputs across rows       */

@supports (grid-template-columns: subgrid) {
    .str-section-body {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 12px 12px;
    }

    .str-field {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    .str-hint {
        grid-column: 2;
    }
}

/* ─── 16. Cascade Layers ───────────────── */
/* Explicit style precedence                 */

@layer bot-base, bot-components, bot-utilities;

@layer bot-utilities {
    .bot-text-brand { color: var(--brand); }
    .bot-text-success { color: var(--success); }
    .bot-text-warning { color: var(--warning); }
    .bot-text-danger { color: var(--danger); }
    .bot-bg-brand-muted { background: var(--brand-muted); }
    .bot-glow { box-shadow: var(--brand-glow); }
}

/* ─── 17. Scroll Snap for Analytics ──────  */
/* Horizontal scroll snaps on mobile         */

@media (max-width: 768px) {
    .bot-analytics-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .bot-analytics-row::-webkit-scrollbar {
        display: none;
    }

    .bot-metric-card {
        scroll-snap-align: start;
        min-width: 200px;
        flex-shrink: 0;
    }
}

/* ─── 18. Variable Font Tuning ─────────── */
/* Use font-variation-settings if Inter VF   */

@supports (font-variation-settings: 'wght' 400) {
    .bot-schedule-number {
        font-variation-settings: 'wght' 850;
    }
    .bot-metric-value {
        font-variation-settings: 'wght' 800;
    }
    .bot-section-title {
        font-variation-settings: 'wght' 700;
    }
    .bm-template-name {
        font-variation-settings: 'wght' 680;
    }
}

/* ─── 19. Animated Pulse Ring Status ───── */
/* Improved status indicator animation       */

@property --pulse-scale {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
}

.bot-status-on .bot-pulse {
    position: relative;
}

.bot-status-on .bot-pulse::before,
.bot-status-on .bot-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: pulseRing 2s var(--ease-out-expo) infinite;
}

.bot-status-on .bot-pulse::after {
    animation-delay: 0.5s;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ─── 20. Smooth Page Transitions ──────── */
/* View-driven entrance for content area     */

@supports (animation-timeline: view()) {
    .content {
        animation: contentReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 10%;
    }
}

@keyframes contentReveal {
    from {
        opacity: 0.85;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* ─── Feature Query Fallback ───────────── */
/* Graceful degradation for older browsers   */

@supports not (container-type: inline-size) {
    .bot-nav-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@supports not (animation-timeline: view()) {
    .bot-nav-card,
    .bm-template-card,
    .bot-metric-card,
    .kb-card,
    .str-section,
    .cfg-card,
    .cat-card,
    .lvl-section {
        animation: cardEnter var(--duration-enter) var(--ease-out-expo) both;
    }
}