/* ── Convergint Vertex AI Search ───────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.cvs-hero {
    padding: 2.5rem 2.5rem 2rem;
    position: relative;
}

.cvs-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 .4rem;
}

.cvs-heading {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 1.25rem;
    line-height: 1.3;
}

/* ── Search bar ────────────────────────────────────────────────────────────── */
.cvs-bar-wrap {
    position: relative;
}

.cvs-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
    border: 2px solid transparent;
    padding-left: 14px;
    overflow: hidden;
    transition: border-color .15s ease;
}

/* .cvs-bar:focus-within {
    border-color: #0099d8;
} */

.cvs-bar-icon {
    color: #8A9BB3;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cvs-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    background: transparent;
    color: #111111;
    min-width: 0;
    -webkit-appearance: none;
}

.cvs-input::placeholder {
    color: #9CA8B8;
}

/* Remove the browser default clear button on search inputs */
.cvs-input::-webkit-search-cancel-button,
.cvs-input::-webkit-search-decoration {
    display: none;
}

.cvs-clear {
    background: none;
    border: none;
    padding: 0 8px;
    cursor: pointer;
    color: #9CA8B8;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .12s;
}

.cvs-clear:hover {
    color: #5E7291;
}

.cvs-submit {
    background: #0099d8;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    /* height: 52px; */
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    /* font-family: inherit; */
    cursor: pointer;
    /* display: flex; */
    /* align-items: center; */
    gap: 7px;
    /* flex-shrink: 0; */
    transition: 0.5s;
    /* white-space: nowrap; */
}

.cvs-submit:hover {
    background: #cccccc;
    color: #0099d8;
    transition: 0.5s;
}

.cvs-submit:active {
    transform: scale(.98);
}

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.cvs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1rem;
}

.cvs-chip {
    background: rgba(255, 255, 255, .10);
    border: .5px solid rgba(255, 255, 255, .20);
    color: rgba(255, 255, 255, .80);
    font-size: 12px;
    font-family: inherit;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s;
}

.cvs-chip:hover {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

/* ── Autocomplete dropdown ─────────────────────────────────────────────────── */
.cvs-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: .5px solid #D1D9E6;
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.cvs-auto-item {
    padding: 9px 16px;
    font-size: 14px;
    color: #222;
    cursor: pointer;
    transition: background .1s;
}

.cvs-auto-item:hover,
.cvs-auto-item.cvs-auto-active {
    background: #F4F7FB;
}

.cvs-auto-item strong {
    color: #002F5F;
    font-weight: 600;
}

/* ── Results panel ─────────────────────────────────────────────────────────── */
.cvs-results {
    margin-top: 1.25rem;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: .5px solid #D1D9E6;
}

/* ── AI summary ────────────────────────────────────────────────────────────── */
.cvs-ai-summary {
    padding: 1.1rem 1.4rem;
    border-bottom: .5px solid #D1D9E6;
    border-left: 3px solid #0099d8;
}

.cvs-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F0F4FA;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #002F5F;
    margin-bottom: .65rem;
}

.cvs-ai-text {
    font-size: 14px;
    line-height: 1.7;
    color: #222222;
    margin-bottom: .65rem;
}

.cvs-ai-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cvs-source-tag {
    font-size: 11px;
    color: #5E7291;
    background: #F4F6F9;
    border: .5px solid #D1D9E6;
    border-radius: 4px;
    padding: 3px 10px;
    text-decoration: none;
    transition: color .12s;
}

.cvs-source-tag:hover {
    color: #002F5F;
    text-decoration: underline;
}

/* ── Spell correction ──────────────────────────────────────────────────────── */
.cvs-correction {
    padding: .7rem 1.4rem;
    font-size: 13px;
    color: #5E7291;
    border-bottom: .5px solid #D1D9E6;
    margin: 0;
}

.cvs-correction strong {
    color: #002F5F;
}

/* ── Result list ───────────────────────────────────────────────────────────── */
.cvs-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cvs-result {
    border-bottom: .5px solid #D1D9E6;
}

.cvs-result:last-child {
    border-bottom: none;
}

.cvs-result-link {
    display: block;
    padding: 1rem 1.4rem;
    text-decoration: none;
    transition: background .12s;
}

.cvs-result-link:hover {
    background: #F9FAFB;
}

.cvs-result-link:focus-visible {
    outline: 2px solid #0099d8;
    outline-offset: -2px;
}

/* Content-type badges */
.cvs-result-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 4px;
    margin-bottom: .4rem;
}

.cvs-type-solution    { background: #EDF2FA; color: #002F5F; }
.cvs-type-case-study  { background: #EAF3DE; color: #3B6D11; }
.cvs-type-resource    { background: #FEF0F2; color: #0099d8; }
.cvs-type-blog,
.cvs-type-news        { background: #FFF8E6; color: #854F0B; }
.cvs-type-partner     { background: #F3EEFA; color: #4A2D8C; }

.cvs-result-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #002F5F;
    margin-bottom: .25rem;
    line-height: 1.4;
}

.cvs-result-link:hover .cvs-result-title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cvs-result-snippet {
    display: block;
    font-size: 13px;
    line-height: 1.65;
    color: #5E7291;
}

/* ── Loading dots ──────────────────────────────────────────────────────────── */
.cvs-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 2.25rem;
}

.cvs-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0099d8;
    animation: cvs-pulse 1.2s ease-in-out infinite;
}

.cvs-loading span:nth-child(2) { animation-delay: .2s; }
.cvs-loading span:nth-child(3) { animation-delay: .4s; }

@keyframes cvs-pulse {
    0%, 80%, 100% { transform: scale(.55); opacity: .35; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Empty / error state ───────────────────────────────────────────────────── */
.cvs-empty {
    padding: 2rem 1.4rem;
    text-align: center;
}

.cvs-empty-msg {
    font-size: 14px;
    margin: 0 0 .75rem;
}

.cvs-contact-cta {
    display: inline-block;
    background: #0099d8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 22px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.5s;
}

.cvs-contact-cta:hover {
    background: #cccccc;
    color: #0099d8;
    transition: 0.5s;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cvs-hero {
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .cvs-heading {
        font-size: 19px;
    }

    .cvs-submit {
        font-size: 13px;
    }

    .cvs-submit svg {
        display: none; /* hide arrow icon on very small screens */
    }
}
