/*
 * Sidebar "Operate Agent" card — pinned to the bottom of verticalMenu.
 * Loaded globally via layouts/sections/styles.blade.php so the rules
 * don't ship inline on every page render. See the matching markup in
 * resources/views/layouts/sections/menu/verticalMenu.blade.php.
 */
.ai-agent-card {
    --op-color: #014ecf;          /* operate brand blue */
    --op-color-strong: #003fa6;
    --op-color-soft: rgba(1, 78, 207, 0.08);
    --op-surface: #ffffff;

    position: relative;
    display: block;
    /* Fixed width + matching radius so this card and the agent-laravel
       OperateCard render the same regardless of sidebar width.
       Auto horizontal margin centers it in the (wider) operate sidebar. */
    margin: 12px auto 60px;
    width: 216px;
    max-width: 216px;
    /* Taller than 150 so the Beta pill gets its own row above the title
       instead of an absolute badge overlapping the heading. */
    height: 172px;
    min-height: 172px;
    max-height: 172px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--op-color);
    border-radius: 1.5rem;
    background: var(--op-surface);
    box-shadow:
        0 1px 0 rgba(1, 78, 207, 0.04),
        0 10px 28px -16px rgba(1, 78, 207, 0.40);
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.ai-agent-card:hover {
    transform: translateY(-1px);
    border-color: var(--op-color-strong);
    box-shadow:
        0 1px 0 rgba(1, 78, 207, 0.06),
        0 16px 34px -16px rgba(1, 78, 207, 0.50);
}

/* Sheen — soft luminous band sweeping right-to-left across the card. */
.ai-agent-card__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        100deg,
        transparent 0%,
        transparent 35%,
        rgba(1, 78, 207, 0.10) 47%,
        rgba(1, 78, 207, 0.20) 50%,
        rgba(1, 78, 207, 0.10) 53%,
        transparent 65%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 220% 0;
    animation: ai-agent-sheen 4.6s ease-in-out infinite;
    mix-blend-mode: multiply;
}
@keyframes ai-agent-sheen {
    0%   { background-position: 220% 0; }
    65%  { background-position: -120% 0; }
    100% { background-position: -120% 0; }
}

.ai-agent-card__inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px 16px;
    text-align: center;
}

/* Beta pill — sits in the flow as the first row of the card, centered
   above the title (no longer absolutely positioned, so it can't overlap). */
.ai-agent-card__badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid rgba(1, 78, 207, 0.14);
    border-radius: 999px;
    background: #eaf2ff;
    color: var(--op-color);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 14px -12px rgba(1, 78, 207, 0.55);
}

.ai-agent-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--op-color);
    margin-bottom: 4px;
}
.ai-agent-card__logo {
    width: 132px;
    height: auto;
    max-width: 70%;
    display: block;
}

.ai-agent-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2px;
    color: var(--op-color-strong);
}
.ai-agent-card__title-text {
    display: inline-block;
}

.ai-agent-card__subtitle {
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(33, 51, 88, 0.62);
    max-width: 90%;
    margin: 0 auto;
}

.ai-agent-card__cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--op-color);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 14px -8px rgba(1, 78, 207, 0.55);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ai-agent-card__cta i {
    font-size: 14px;
}
.ai-agent-card:hover .ai-agent-card__cta {
    background: var(--op-color-strong);
    box-shadow: 0 8px 16px -8px rgba(1, 78, 207, 0.70);
}
.ai-agent-card__chevron {
    transition: transform 0.2s ease;
}
.ai-agent-card:hover .ai-agent-card__chevron {
    transform: translateX(2px);
}

/* Collapsed sidebar: shrink card + show only the brand mark. */
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card {
    height: auto;
    margin: 10px 8px;
}
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__title,
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__subtitle,
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__cta {
    display: none;
}
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__inner {
    padding: 10px 8px;
}
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__logo {
    width: 32px;
}
/* Collapsed rail: the pill collapses to a small centered brand-colored
   status dot (text hidden) so it never widens the narrow sidebar. */
html:not(.layout-menu-expanded) .layout-menu-collapsed .ai-agent-card__badge {
    align-self: center;
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border: 0;
    background: var(--op-color);
    box-shadow: none;
    font-size: 0;
    letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ai-agent-card__sheen { animation: none; background: none; }
}