/* ═══════════════════════════════════════════════════════════════════════════
 * SmartDeal AI Search — UI épica mobile-first
 *
 * Diseño: glassmorphism + gradient lima + subtle blob bg + smooth animations
 * Mobile: textarea grande + chips horizontales scroll + cards 1col→2col
 * Desktop: layout amplio + chips inline + cards 4col grid
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties ────────────────────────────────────────────────── */
.sd-ai-search {
    --sd-ai-lime:        #C5FF3E;
    --sd-ai-lime-dark:   #9BD12A;
    --sd-ai-lime-glow:   rgba(197, 255, 62, 0.4);
    --sd-ai-black:       #0A0A0A;
    --sd-ai-gray-900:    #1A1A1A;
    --sd-ai-gray-800:    #2A2A2A;
    --sd-ai-gray-100:    #F4F4F4;
    --sd-ai-gray-200:    #E8E8E8;
    --sd-ai-gray-500:    #6F6F6F;
    --sd-ai-radius:      24px;
    --sd-ai-radius-sm:   14px;
    --sd-ai-shadow:      0 20px 60px -20px rgba(0,0,0,.25), 0 4px 16px -4px rgba(0,0,0,.1);
    --sd-ai-font:        -apple-system, BlinkMacSystemFont, "Poppins", "Segoe UI", sans-serif;
}

/* ── SECTION CONTAINER ────────────────────────────────────────────────────── */
.sd-ai-search {
    position: relative;
    padding: 44px 16px 56px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 60%, #f4f4f4 100%);
    overflow: hidden;
    font-family: var(--sd-ai-font);
    isolation: isolate;
}
@media (min-width: 768px) {
    .sd-ai-search { padding: 88px 24px 96px; }
}

/* Decorative background blobs */
.sd-ai-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sd-ai-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    animation: sdAiFloat 18s ease-in-out infinite;
}
.sd-ai-bg-blob--1 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--sd-ai-lime) 0%, transparent 70%);
    top: -80px; left: -80px;
}
.sd-ai-bg-blob--2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #B0F5FF 0%, transparent 70%);
    bottom: -160px; right: -120px;
    animation-delay: -9s;
    opacity: .25;
}
@keyframes sdAiFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 30px) scale(0.95); }
}

/* ── CONTAINER ────────────────────────────────────────────────────────────── */
.sd-ai-container {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
}

/* ── EYEBROW (powered by Claude) ──────────────────────────────────────────── */
.sd-ai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    background: var(--sd-ai-black);
    color: var(--sd-ai-lime);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .sd-ai-eyebrow {
        font-size: 12px;
        margin-bottom: 18px;
    }
}
.sd-ai-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sd-ai-lime);
    box-shadow: 0 0 0 0 var(--sd-ai-lime-glow);
    animation: sdAiPulse 1.8s ease-in-out infinite;
}
@keyframes sdAiPulse {
    0%   { box-shadow: 0 0 0 0 var(--sd-ai-lime-glow); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── TITLE ────────────────────────────────────────────────────────────────── */
.sd-ai-title {
    font-size: clamp(26px, 5.5vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--sd-ai-black);
    text-wrap: balance;
}
@media (min-width: 768px) {
    .sd-ai-title { line-height: 1.05; margin-bottom: 14px; }
}
.sd-ai-title-grad {
    background: linear-gradient(120deg, var(--sd-ai-lime-dark) 0%, var(--sd-ai-black) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sd-ai-subtitle {
    max-width: 100%;
    font-size: clamp(14.5px, 1.5vw, 17px);
    line-height: 1.55;
    color: var(--sd-ai-gray-500);
    margin: 0 0 24px;
    text-wrap: balance;
}
@media (min-width: 768px) {
    .sd-ai-subtitle {
        margin-bottom: 36px;
        max-width: 100%;
    }
}
@media (min-width: 1100px) {
    .sd-ai-subtitle { white-space: nowrap; } /* desktop wide: 1 línea */
}

/* ── FORM ─────────────────────────────────────────────────────────────────── */
.sd-ai-form {
    margin: 0;
}
.sd-ai-label-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.sd-ai-input-wrap {
    position: relative;
    background: #fff;
    border: 1px solid var(--sd-ai-gray-200);
    border-radius: var(--sd-ai-radius);
    box-shadow: var(--sd-ai-shadow);
    transition: border-color .25s, box-shadow .25s, transform .25s;
    /* Mobile: padding inferior para que el botón static respire dentro del wrap */
    padding-bottom: 14px;
}
@media (min-width: 768px) {
    .sd-ai-input-wrap {
        padding-bottom: 0;
        overflow: hidden; /* desktop: corners limpios con botón superpuesto */
    }
}
.sd-ai-input-wrap:focus-within {
    border-color: var(--sd-ai-black);
    box-shadow: 0 0 0 4px var(--sd-ai-lime-glow), var(--sd-ai-shadow);
    transform: translateY(-1px);
}

.sd-ai-input-wrap textarea {
    width: 100%;
    min-height: 96px;
    padding: 18px 22px 12px;
    border: 0;
    background: transparent;
    font-size: 16px; /* 16px+ evita zoom de iOS */
    line-height: 1.5;
    color: var(--sd-ai-black);
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .sd-ai-input-wrap textarea {
        font-size: 18px;
        padding: 26px 200px 26px 28px; /* desktop: hueco para botón superpuesto */
        min-height: 84px;
    }
}
.sd-ai-input-wrap textarea::placeholder {
    color: #9F9F9F;
}

/* ── Keyboard hint ───────────────────────────────────────────────────────── */
.sd-ai-kbd-hint {
    display: none; /* mobile: oculto para no quitar espacio */
    position: absolute;
    bottom: 18px;
    left: 28px;
    font-size: 11px;
    color: #B5B5B5;
    letter-spacing: .02em;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity .25s;
}
.sd-ai-input-wrap:focus-within .sd-ai-kbd-hint {
    opacity: 1;
}
@media (min-width: 1024px) {
    .sd-ai-kbd-hint { display: block; }
}
.sd-ai-kbd-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    background: #F4F4F4;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10px;
    color: #6F6F6F;
    line-height: 1.4;
    box-shadow: 0 1px 0 #E0E0E0;
}

/* ── SUBMIT BUTTON ────────────────────────────────────────────────────────── */
.sd-ai-submit {
    /* Mobile: ancho completo, abajo del textarea (no superpuesto) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--sd-ai-lime) 0%, var(--sd-ai-lime-dark) 100%);
    color: var(--sd-ai-black);
    border: 0;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 4px 16px -4px var(--sd-ai-lime-glow), 0 1px 3px rgba(0,0,0,.1);
    transition: transform .2s, box-shadow .25s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px; /* tap target accesible */
}
@media (min-width: 768px) {
    .sd-ai-submit {
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: auto;
        margin: 0;
        padding: 14px 26px;
        border-radius: 999px;
        min-height: 0;
    }
}
.sd-ai-submit:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 22px -4px var(--sd-ai-lime-glow), 0 2px 6px rgba(0,0,0,.15);
}
.sd-ai-submit:active {
    transform: translateY(0) scale(.98);
}
.sd-ai-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}
.sd-ai-submit-arrow {
    width: 18px;
    height: 18px;
    transition: transform .2s;
}
.sd-ai-submit:hover .sd-ai-submit-arrow {
    transform: translateX(3px);
}

/* loading state */
.sd-ai-submit-loading {
    display: none;
    gap: 4px;
    align-items: center;
}
.sd-ai-submit-loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: sdAiLoadDot 1s ease-in-out infinite;
}
.sd-ai-submit-loading span:nth-child(2) { animation-delay: .15s; }
.sd-ai-submit-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes sdAiLoadDot {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%      { opacity: 1; transform: scale(1.1); }
}
.sd-ai-submit.is-loading .sd-ai-submit-text,
.sd-ai-submit.is-loading .sd-ai-submit-arrow { display: none; }
.sd-ai-submit.is-loading .sd-ai-submit-loading { display: inline-flex; }

/* ── CHIPS (sugerencias) ──────────────────────────────────────────────────── */
.sd-ai-chips {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 16px 12px 4px; /* padding-right da espacio para scroll lateral */
    margin-left: -4px;
    margin-right: -16px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Fade-out indicator: insinúa "hay más a la derecha" */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
}
.sd-ai-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .sd-ai-chips {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0;
        margin: 20px 0 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.sd-ai-chip {
    flex-shrink: 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--sd-ai-gray-200);
    border-radius: 999px;
    color: var(--sd-ai-gray-900);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    min-height: 38px; /* tap target */
}
.sd-ai-chip:hover {
    background: var(--sd-ai-black);
    color: var(--sd-ai-lime);
    border-color: var(--sd-ai-black);
    transform: translateY(-1px);
}

/* ── TURNSTILE container (invisible) ──────────────────────────────────────── */
.sd-ai-turnstile {
    margin-top: 12px;
    min-height: 0; /* invisible by default */
}

/* ── RESULT ───────────────────────────────────────────────────────────────── */
.sd-ai-result {
    margin-top: 28px;
}
@media (min-width: 768px) {
    .sd-ai-result { margin-top: 36px; }
}
.sd-ai-result:empty { display: none; }

.sd-ai-result-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: rgba(197, 255, 62, .12);
    border: 1px solid rgba(197, 255, 62, .3);
    border-radius: var(--sd-ai-radius-sm);
}
@media (min-width: 640px) {
    .sd-ai-result-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
    }
}
.sd-ai-result-summary {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--sd-ai-black);
    font-weight: 500;
}
@media (min-width: 640px) {
    .sd-ai-result-summary { font-size: 15px; }
}
.sd-ai-result-summary strong {
    color: var(--sd-ai-lime-dark);
    display: block;
    margin-bottom: 2px;
}
@media (min-width: 640px) {
    .sd-ai-result-summary strong {
        display: inline;
        margin-bottom: 0;
    }
}
.sd-ai-result-reset {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--sd-ai-black);
    border-radius: 999px;
    color: var(--sd-ai-black);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    min-height: 36px;
}
.sd-ai-result-reset:hover {
    background: var(--sd-ai-black);
    color: var(--sd-ai-lime);
}
@media (min-width: 640px) {
    .sd-ai-result-reset {
        align-self: center;
        padding: 6px 14px;
        min-height: 0;
    }
}

/* ── CARDS GRID ───────────────────────────────────────────────────────────── */
.sd-ai-cards-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 480px) {
    .sd-ai-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .sd-ai-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 1280px) {
    .sd-ai-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── CARD ─────────────────────────────────────────────────────────────────── */
.sd-ai-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sd-ai-gray-200);
    border-radius: var(--sd-ai-radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    opacity: 0;
    transform: translateY(20px);
    animation: sdAiCardIn .5s ease forwards;
}
@keyframes sdAiCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.sd-ai-card:nth-child(1) { animation-delay: .05s; }
.sd-ai-card:nth-child(2) { animation-delay: .12s; }
.sd-ai-card:nth-child(3) { animation-delay: .19s; }
.sd-ai-card:nth-child(4) { animation-delay: .26s; }
.sd-ai-card:nth-child(5) { animation-delay: .33s; }
.sd-ai-card:nth-child(6) { animation-delay: .40s; }

.sd-ai-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.15);
    border-color: var(--sd-ai-black);
}

.sd-ai-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sd-ai-gray-100);
    overflow: hidden;
}
.sd-ai-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.sd-ai-card:hover .sd-ai-card-img img {
    transform: scale(1.05);
}

.sd-ai-card-score {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--sd-ai-lime);
    color: var(--sd-ai-black);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px var(--sd-ai-lime-glow);
}
.sd-ai-card-score::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-ai-black);
}

.sd-ai-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
@media (min-width: 768px) {
    .sd-ai-card-body { padding: 16px 16px 18px; }
}
.sd-ai-card-title {
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--sd-ai-black);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .sd-ai-card-title { min-height: 39px; } /* reserva 2 líneas en grids alineados */
}

/* ── Precio bloque épico ─────────────────────────────────────────────────── */
.sd-ai-card-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 0 4px;
    border-top: 1px dashed var(--sd-ai-gray-200);
    margin-top: 2px;
}
.sd-ai-card-regular {
    font-size: 12px;
    color: var(--sd-ai-gray-500);
    text-decoration: line-through;
    font-weight: 500;
    line-height: 1.2;
}
.sd-ai-card-main {
    font-size: 22px;
    font-weight: 800;
    color: var(--sd-ai-black);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-top: 1px;
}
.sd-ai-card-transfer-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sd-ai-lime-dark);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 6px;
}
.sd-ai-card-installment {
    font-size: 12.5px;
    color: var(--sd-ai-gray-500);
    line-height: 1.35;
    padding: 6px 10px;
    background: var(--sd-ai-gray-100);
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
}
.sd-ai-card-installment strong {
    color: var(--sd-ai-black);
    font-weight: 800;
}

/* ── Discount badge ──────────────────────────────────────────────────────── */
/* En mobile el WhatsApp FAB del sitio está bottom-right, así que el discount
   en top-right NO choca. Lo mantenemos top-right con tamaño compacto. */
.sd-ai-card-discount {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px 9px;
    background: #FF3B3B;
    color: #fff;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(255, 59, 59, .35);
}

.sd-ai-card-reason {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: rgba(197, 255, 62, .15);
    border-left: 3px solid var(--sd-ai-lime);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sd-ai-gray-900);
    font-style: italic;
}

/* ── CARDS skeleton (loading) ─────────────────────────────────────────────── */
.sd-ai-skeleton {
    margin-top: 36px;
}
.sd-ai-thinking {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--sd-ai-black);
    color: var(--sd-ai-lime);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}
.sd-ai-thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-ai-lime);
    animation: sdAiThinkingDot 1.4s ease-in-out infinite;
}
.sd-ai-thinking-dot:nth-child(2) { animation-delay: .2s; }
.sd-ai-thinking-dot:nth-child(3) { animation-delay: .4s; }
@keyframes sdAiThinkingDot {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40%           { opacity: 1; transform: scale(1.2); }
}

.sd-ai-card--skeleton {
    pointer-events: none;
    border: 0;
    background: var(--sd-ai-gray-100);
    animation: sdAiSkeleton 1.6s ease-in-out infinite;
    aspect-ratio: 1 / 1.4;
    opacity: 1;
    transform: none;
}
@keyframes sdAiSkeleton {
    0%, 100% { background: var(--sd-ai-gray-100); }
    50%      { background: #ECECEC; }
}

/* ── ERROR / FALLBACK ─────────────────────────────────────────────────────── */
.sd-ai-error {
    padding: 16px 20px;
    background: #FFF5F5;
    border: 1px solid #F5C6C6;
    border-radius: var(--sd-ai-radius-sm);
    color: #B43232;
    font-size: 14px;
    font-weight: 500;
}
.sd-ai-fallback-msg {
    margin: 0 0 18px;
    color: var(--sd-ai-gray-500);
    font-size: 14px;
}

/* Reduce motion users */
@media (prefers-reduced-motion: reduce) {
    .sd-ai-bg-blob,
    .sd-ai-pulse,
    .sd-ai-card,
    .sd-ai-card-img img { animation: none; transition: none; }
    .sd-ai-card { opacity: 1; transform: none; }
}