/* Plan 006: utilities.css — One-off helper classes and status text
   Extracted from frontend/styles.css on 2026-04-03 */


/* ── Design-system utility classes ───────────────────────────────────
   These are the canonical .btn / .input / .badge definitions from
   colors_and_type.css (gitignored). Any component that uses these class
   names in JS depends on this file being loaded — do NOT move them back
   to the gitignored design-system file.
   ─────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-secondary {
    background: var(--bg-surface);
    color: var(--fg-primary);
    border-color: var(--border-default);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--bg-surface-alt); border-color: var(--border-strong); }

.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--fg-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inner);
    transition: var(--transition-base);
    outline: none;
}
.input::placeholder { color: var(--fg-tertiary); }
.input:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-inner), var(--shadow-focus);
}

/* ──────────────────────────────────────────────────────────────────── */

.is-hidden {
    display: none !important;
}

.muted {
    color: #6b7280;
}


/* ── Info icon with tooltip ── */


/* ── Status messages ── */
#message {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-toast);
    padding: 10px 16px;
    border-radius: 4px;
    max-width: 360px;
    display: none;
}

#message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ── AI Insights phase-driven progress bar ───────────────────────────── */
.ai-loader {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 1;
    transition: opacity 250ms ease;
}
.ai-loader.is-fading { opacity: 0; }

.ai-loader-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ai-loader-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    background: var(--color-primary-500);
    border-radius: var(--radius-full);
    transform: translateX(-100%);
    animation: ai-loader-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, width;
}

@keyframes ai-loader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(calc(100% / 0.38)); }
}

.ai-loader-fill.is-completing {
    animation: none;
    transform: translateX(0);
    width: 100%;
    transition: transform 300ms ease-out, width 300ms ease-out;
}

.ai-loader-label {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}