/*
 * comps-connection.css — Comps-to-Decision Live Connection Styles
 * Batch 41: Banner, ARV flash, confidence ring pulse, reusable toast
 *
 * Zero hardcoded colors — all values via CSS custom properties from base.css.
 * Load after base.css.
 */

/* ============================================================
   COMPS ARV BANNER — #lf-comps-arv-banner
   Sticky at top of Comps tab content area.
   ============================================================ */

#lf-comps-arv-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    margin: 0 0 12px 0;
    background: var(--blue-steel);
    border-radius: var(--radius-sm);
    box-shadow:
        0 0 12px rgba(19, 65, 96, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hidden state — when no property loaded */
#lf-comps-arv-banner.lf-comps-arv-banner--hidden {
    display: none;
}

/* Hidden in landing state */
body.lf-state-landing #lf-comps-arv-banner {
    display: none;
}

/* Banner icon */
.lf-comps-banner__icon {
    color: var(--cyan-500);
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Banner text content */
.lf-comps-banner__text {
    flex: 1;
    line-height: var(--leading-snug);
}

/* Highlighted value spans */
.lf-comps-banner__value {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    transition: color 150ms ease;
}

/* ARV value — can flash gold */
.lf-comps-banner__arv {
    color: var(--text-primary);
}

/* Offer value */
.lf-comps-banner__offer {
    color: var(--gold-400);
}

/* ============================================================
   ARV FLASH EFFECT
   Applied to #lf-comps-banner-arv on ARV change.
   JS adds class, removes after 300ms.
   ============================================================ */

.banner-arv-flash {
    color: var(--gold-500) !important;
    transition: color 150ms ease;
}

/* ============================================================
   CONFIDENCE RING PULSE
   Applied to .dash-conf-ring on ARV > 5% change.
   JS adds class, removes after 350ms.
   ============================================================ */

@keyframes confRingPulse {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

.confidence-ring--pulse {
    animation: confRingPulse 300ms ease-out forwards;
}

/* ============================================================
   FDCC TOAST COMPONENT — .fdcc-toast
   Fixed bottom-center, stacks vertically.
   ============================================================ */

.fdcc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 280px;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface-card);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--blue-steel); /* default; overridden inline by JS */
    border-radius: var(--radius-sm);
    box-shadow: var(--glass-shadow);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.15s ease, bottom 0.15s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Message text */
.fdcc-toast__message {
    flex: 1;
    display: block;
}

/* Entering state — fade in (150ms) */
.fdcc-toast--entering {
    opacity: 1;
    transition: opacity 0.15s ease, bottom 0.15s ease;
}

/* Leaving state — fade out (300ms) */
.fdcc-toast--leaving {
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.15s ease;
    pointer-events: none;
}