/* app/static/css/style.css — CVE Intelligence design system */

:root {
    --brand-600: #4f46e5;
    --brand-500: #6366f1;
    --brand-400: #818cf8;
}

html, body { height: 100%; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(14, 165, 233, 0.07), transparent 55%),
        #f7f8fb;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Brand / topbar ---------- */
.topbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid #e8eaf0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.nav-link {
    position: relative;
    color: #64748b;
    transition: color .18s ease;
}
.nav-link:hover { color: #0f172a; }
.nav-link.active { color: #0f172a; }
.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-500), #22d3ee);
}

/* ---------- Buttons ---------- */
.btn-brand {
    background-image: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .6);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-brand:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .7); }
.btn-brand:active { transform: translateY(0); }
.btn-brand:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .25);
}

/* ---------- Inputs ---------- */
.input {
    background: #fff;
    border: 1px solid #d8dbe5;
    border-radius: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .55rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .02em; border-radius: 9999px; text-transform: uppercase;
}
.badge-rejected { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.badge-active   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* ---------- CVE id pill ---------- */
.cve-pill {
    font-weight: 700;
    color: var(--brand-600);
    transition: color .15s ease;
}
.cve-pill:hover { color: #3730a3; text-decoration: underline; }

/* ---------- Table ---------- */
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: #f8fafc; }

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-in { animation: fadeInUp .35s ease both; }

@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.skeleton {
    background: #eef1f6;
    background-image: linear-gradient(90deg, #eef1f6 0px, #f7f9fc 80px, #eef1f6 160px);
    background-size: 600px 100%;
    animation: shimmer 1.3s infinite linear;
    border-radius: .5rem;
}

/* typing indicator */
.typing span {
    display: inline-block; width: 7px; height: 7px; margin: 0 2px;
    background: var(--brand-400); border-radius: 50%; opacity: .5;
    animation: bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* spinner */
.spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toasts ---------- */
#toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 100;
    display: flex; flex-direction: column; gap: .5rem;
}
.toast {
    min-width: 240px; max-width: 360px;
    padding: .75rem 1rem; border-radius: .75rem; color: #fff;
    box-shadow: 0 12px 30px -10px rgba(2, 6, 23, .45);
    display: flex; align-items: center; gap: .6rem;
    animation: toastIn .25s ease both;
    font-size: .875rem;
}
.toast.hide { animation: toastOut .25s ease both; }
.toast-info    { background: #1e293b; }
.toast-success { background: #047857; }
.toast-error   { background: #b91c1c; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Chat ---------- */
.bubble-user {
    background-image: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
}
.chat-scroll::-webkit-scrollbar, .modal-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-thumb, .modal-scroll::-webkit-scrollbar-thumb {
    background: #d6dae3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
.chip {
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    border-radius: 9999px; padding: .4rem .8rem; font-size: .8rem;
    transition: all .15s ease; cursor: pointer;
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-600); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

/* line clamps */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }