/*
 * Product components (cb-*), ported from docs/charte/bundle.css as native nested CSS,
 * without the .cb root that only isolated the design-system previews.
 * Generic controls (buttons, fields, switch, card, table, dropdown, badge) stay Tabler's:
 * nothing here redraws them. Colors come from tokens.css only.
 */

/*
 * Generation button: modifiers set on a Tabler .btn, through Tabler's own button variables
 * so that hover, active and focus states keep working. The only action that carries the
 * spark. Accent fill with an accent-soft ring, never a gradient, never purple.
 * The charte defines no accent-hover token: hover widens the ring instead.
 */
.cb-btn--generate {
    --tblr-btn-color: var(--on-accent);
    --tblr-btn-bg: var(--accent);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--on-accent);
    --tblr-btn-hover-bg: var(--accent);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--on-accent);
    --tblr-btn-active-bg: var(--accent);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-box-shadow: 0 0 0 3px var(--accent-soft);

    &:hover {
        --tblr-btn-box-shadow: 0 0 0 4px var(--accent-soft);
    }
}

.cb-btn--generate-outline {
    --tblr-btn-color: var(--ink);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: var(--accent);
    --tblr-btn-hover-color: var(--ink);
    --tblr-btn-hover-bg: var(--accent-soft);
    --tblr-btn-hover-border-color: var(--accent);
    --tblr-btn-active-color: var(--ink);
    --tblr-btn-active-bg: var(--accent-soft);
    --tblr-btn-active-border-color: var(--accent);
}

/* Spark: a filled SVG (assets/icons/cb/spark.svg), always next to a label. */
.cb-spark {
    flex: none;
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;

    .btn & {
        width: 20px;
        height: 20px;
    }
}

/* Deliverable status badge */
.cb-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font: 600 12px/16px var(--font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;

    /* Size only: a Tabler icon gets its 1.5px stroke from .icon, the spark its fill from .cb-spark */
    & svg {
        width: 14px;
        height: 14px;
    }
}

.cb-badge--brief {
    background: var(--info-soft);
    color: var(--info);
}

.cb-badge--draft {
    background: var(--accent-soft);
    color: var(--ink);

    & .cb-spark {
        width: 12px;
        height: 12px;
    }
}

.cb-badge--review {
    background: var(--warning-soft);
    color: var(--ink);
}

.cb-badge--validated {
    background: var(--success-soft);
    color: var(--success);
}

.cb-badge--delivered {
    background: var(--brand-soft);
    color: var(--brand);
}

.cb-badge--refused {
    background: var(--danger-soft);
    color: var(--danger);
}

.cb-badge--neutral {
    background: var(--surface-sunken);
    color: var(--ink-muted);
}

/* Version chip */
.cb-version {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 28px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    font: 400 13px/20px var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.cb-version--current {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

.cb-version__meta {
    color: var(--ink-muted);
}

/* Annotation canvas, pin and bubble */
.cb-canvas {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    overflow: hidden;
}

.cb-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--surface-raised);
    border-radius: var(--radius-pill);
    background: var(--info);
    box-shadow: var(--shadow-sm);
    color: var(--surface);
    font: 500 11px/16px var(--font-mono);
    transform: translate(-50%, -50%);
}

.cb-pin--done {
    background: var(--success);
}

.cb-pin--ai {
    background: var(--accent);
    color: var(--on-accent);
}

.cb-bubble {
    position: absolute;
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    font: 400 13px/20px var(--font-sans);
}

.cb-bubble__meta {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-muted);
    font: 400 11px/16px var(--font-mono);
}

/* Deliverable card */
.cb-card {
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cb-card__preview {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--surface-sunken);
    color: var(--ink-faint);
    font: 400 13px/20px var(--font-mono);
}

.cb-card__body {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}

.cb-card__title {
    margin: 0;
    font: 600 17px/24px var(--font-display);
}

.cb-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-muted);
    font: 400 13px/20px var(--font-sans);
}

/* AI banner. In its working state the pulsing spark replaces the dot, and the text says what the AI works on. */
.cb-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 640px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--ink);

    & .btn {
        flex: none;
        margin-inline-start: auto;
    }
}

.cb-banner__dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.cb-banner__title {
    margin: 0;
    font: 600 15px/24px var(--font-sans);
}

.cb-banner__text {
    margin: 0;
    color: var(--ink-muted);
    font: 400 13px/20px var(--font-sans);
}

.cb-banner__spark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--accent);

    & .cb-spark {
        width: 20px;
        height: 20px;
    }
}

.cb-banner--working .cb-banner__dot {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-banner--working .cb-banner__spark {
        animation: cb-pulse 1.4s ease-in-out infinite;
    }

    @keyframes cb-pulse {
        0%,
        100% {
            opacity: 0.5;
            transform: scale(0.9);
        }

        50% {
            opacity: 1;
            transform: scale(1.05);
        }
    }
}

/* "Powered by" mention. The lockup is an inline SVG in currentColor: it takes the text color, never a fixed ink. */
.cb-powered {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-muted);
    font: 400 12px/16px var(--font-sans);
}

.cb-powered__logo {
    display: inline-block;
    width: 98px;
    height: 18px;
    fill: currentColor;
}

/* Author mark */
.cb-author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font: 400 13px/20px var(--font-sans);
}

.cb-author__mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);

    /* Size only: the 1.5px stroke comes from .icon */
    & svg {
        width: 14px;
        height: 14px;
    }
}

.cb-author--client .cb-author__mark {
    background: var(--info-soft);
    color: var(--info);
}

.cb-author--agency .cb-author__mark {
    background: var(--brand-soft);
    color: var(--brand);
}

.cb-author--ai .cb-author__mark {
    background: var(--accent-soft);
    color: var(--ink);
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.04em;
}

.cb-author__name {
    font-weight: 600;
}

.cb-author__meta {
    color: var(--ink-muted);
}