/* ==========================================================================
ASK eServers — Modern Redesign (Based on Image 2 & 3)
Design system: Modern UI, expansive modal, pill-shaped inputs,
inset-styled product cards, and sleek chat bubbles.

CARD REDESIGN NOTE (v2):
The product card has been rebuilt to match the "simple spec-sheet" reference
design, now laid out 2-per-row. Feature chips, tooltip color, and search
box padding are the user's own customizations and are kept as-is.

BUGFIX NOTE (v3):
Only change in this pass: .idt-ai-modal now grows with its content instead
of being locked to a fixed 90vh, and .idt-ai-body gets min-height:0 so it
can actually scroll inside the flex layout. This is what was causing the
huge empty gap on the idle screen (Image 1) and the chat bubbles getting
pushed out of view / hidden once the 2-column results grid loaded content
taller than the fixed height (Image 2). No classes, functions, or markup
were removed or renamed — this is a pure CSS layout fix.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
--idt-navy:        #000036;
--idt-navy-70:     rgba(0,0,54,0.7);
--idt-navy-tint:   #eef0f6;
--idt-navy-border: #d8dce6;
--idt-red:         #d0142c;
--idt-red-tint:    #fdecef;
--idt-red-border:  rgba(208,20,44,0.28);
--idt-blue:        #2b8aca;
--idt-blue-dark:   #1f6a9e;
--idt-blue-tint:   #eaf5fc;
--idt-blue-border: rgba(43,138,202,0.32);
--idt-accent:      #38bdf8;
--idt-ink-muted:   #64748b;
--idt-ink-faint:   #94a3b8;
--idt-surface-alt: #f8fafc;
--idt-border:      #e2e8f0;

--idt-orange:      #f5871f;
--idt-orange-dark: #dd7712;
--idt-green:       #178a3c;

--idt-font-ui:   'Poppins', sans-serif;
--idt-font-data: 'JetBrains Mono', 'SFMono-Regular', monospace;
}

/* ── RESET & BASE ─────────────────────────────────────────────────────── */
.idt-ai-fab, .idt-ai-fab *,
.idt-ai-overlay, .idt-ai-overlay * {
box-sizing: border-box;
}

/* ── FLOATING ACTION BUTTON ───────────────────────────────────────────── */
.idt-ai-fab {
position: fixed;
bottom: 28px;
left: 28px;
z-index: 999999;
display: flex;
align-items: center;
cursor: pointer;
}
.idt-ai-fab:hover .idt-ai-fab-img {
transform: scale(1.08) translateY(-4px);
}

/* Tooltip */
.idt-ai-tooltip-wrap {
display: flex;
align-items: center;
margin-left: 12px;
opacity: 0;
transform: translateX(-20px);
pointer-events: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.idt-ai-tooltip-wrap.idt-ai-tt-visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.idt-ai-tt-arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 12px solid #ffffff;
flex-shrink: 0;
}
.idt-ai-tt-body { background: #2eaef3; border-radius: 16px; padding: 14px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 30px rgba(0,0,54,0.12); white-space: nowrap; }
.idt-ai-tt-text { display: flex; flex-direction: column; }
.idt-ai-tt-title { font-family: var(--idt-font-ui); font-size: 15px; font-weight: 700; color: #ffffff; }
.idt-ai-tt-sub { font-family: var(--idt-font-ui); font-size: 12px; font-weight: 500; color: #ffffff; margin-top: 2px; }
.idt-ai-tt-close {
width: 26px; height: 26px; background: var(--idt-surface-alt); border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--idt-ink-faint);
transition: all 0.2s ease;
}
.idt-ai-tt-close:hover { background: var(--idt-red-tint); color: var(--idt-red); }
.idt-ai-tt-close svg { width: 10px; height: 10px; fill: none; stroke-width: 2.5; }
@media (max-width: 600px) { .idt-ai-tooltip-wrap { display: none !important; } }

/* ── OVERLAY & MODAL ──────────────────────────────────────────────────── */
.idt-ai-overlay {
position: fixed; inset: 0; z-index: 9999999;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 30px; opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.idt-ai-overlay.idt-ai-open { opacity: 1; visibility: visible; }

/* FIX: was a fixed height:90vh, which forced the modal to always be tall
   (big empty gap on the idle screen) AND, once the 2-column results grid
   made the content taller than that fixed box, there was no functioning
   scroll area — so the chat bubbles got pushed out of view. Letting the
   modal size itself to its content (capped at 90vh) fixes both. */
.idt-ai-modal {
width: 100%;
max-width: 1100px;
height: auto;
max-height: 90vh;
background: #f8fafc;
border-radius: 24px;
box-shadow: 0 40px 100px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,54,0.05);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.98);
transition: transform 0.4s cubic-bezier(.16,1,.3,1);
font-family: var(--idt-font-ui);
}
.idt-ai-overlay.idt-ai-open .idt-ai-modal { transform: translateY(0) scale(1); }

/* ── HEADER ───────────────────────────────────────────────────────────── */
.idt-ai-header {
background: transparent;
padding: 24px 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.idt-ai-header-left { display: flex; align-items: center; gap: 14px; }
.idt-ai-status-dot { display: inline-block; width: 10px; height: 10px; background: #10b981; border-radius: 50%; margin-right: 4px; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.idt-ai-header-name { font-family: var(--idt-font-ui); font-size: 18px; font-weight: 800; color: var(--idt-navy); margin: 0; display: flex; align-items: center; gap: 10px; }
.idt-ai-badge { background: var(--idt-blue); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.idt-ai-header-sub { display: none; }
.idt-ai-header-right {
display: flex;
align-items: center;
gap: 16px;
}
.idt-ai-new-chat {
display: flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: var(--idt-navy);
font-family: var(--idt-font-ui);
font-size: 13px;
font-weight: 600;
padding: 10px 20px;
border-radius: 50px;
border: 1px solid var(--idt-border);
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
cursor: pointer;
transition: all 0.2s ease;
}
.idt-ai-new-chat:hover {
border-color: var(--idt-blue);
color: var(--idt-blue);
box-shadow: 0 4px 12px rgba(43,138,202,0.1);
}
.idt-ai-new-chat svg { width: 14px; height: 14px; stroke: currentColor; }
.idt-ai-close {
width: 40px; height: 40px; background: #ffffff; border: 1px solid var(--idt-border); border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.idt-ai-close:hover { background: var(--idt-red-tint); border-color: var(--idt-red-border); color: var(--idt-red); }
.idt-ai-close svg { width: 14px; height: 14px; stroke: currentColor; }

/* ── SEARCH BAR (FLOATING STYLE) ──────────────────────────────────────── */
.idt-ai-search-zone {
padding: 10px 60px 20px;
background: transparent;
flex-shrink: 0;
}
.idt-ai-search-box {
display: flex; align-items: center; gap: 12px; background: #ffffff;
border-radius: 50px; padding: 3px 28px 3px 17px;
box-shadow: 0 8px 30px rgba(0,0,54,0.06);
border: 1px solid var(--idt-border);
transition: all 0.3s ease;
}
.idt-ai-search-box:focus-within { border-color: var(--idt-blue); box-shadow: 0 10px 40px rgba(43,138,202,0.15); transform: translateY(-1px); }
.idt-ai-search-ico { width: 20px; height: 20px; stroke: var(--idt-ink-faint); stroke-width: 2.5; fill: none; flex-shrink: 0; }
.idt-ai-input {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--idt-font-ui); font-size: 16px; color: var(--idt-navy);
padding: 0; margin: 0; resize: none; line-height: 24px;
}
.idt-ai-input::placeholder { color: var(--idt-ink-faint); font-weight: 500; }
.idt-ai-clear-btn {
width: 32px; height: 32px; background: var(--idt-surface-alt); border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--idt-ink-faint);
transition: all 0.2s; opacity: 0; pointer-events: none; transform: scale(0.85);
}
.idt-ai-clear-btn.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); }
.idt-ai-clear-btn:hover { background: var(--idt-red-tint); color: var(--idt-red); }
.idt-ai-clear-btn svg { width: 14px; height: 14px; }
.idt-ai-find-btn {
height: 44px; padding: 0 28px; background: var(--idt-blue); border: none; border-radius: 50px;
color: #fff; font-family: var(--idt-font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;
}
.idt-ai-find-btn:hover { background: var(--idt-blue-dark); transform: scale(0.97); }
.idt-ai-find-btn svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.2; fill: none; }

/* ── RESULTS BODY ─────────────────────────────────────────────────────── */
/* FIX: added min-height:0. Flex children default to min-height:auto, which
   blocks them from shrinking below their content size — so overflow-y:auto
   never actually kicked in once content (chat + 2-col cards) grew past the
   modal's height, and everything above just got shoved out of view instead
   of becoming scrollable. min-height:0 lets this flex child scroll properly. */
.idt-ai-body {
overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding: 0;
scrollbar-width: thin; scrollbar-color: var(--idt-navy-border) transparent;
}
.idt-ai-body::-webkit-scrollbar { width: 6px; }
.idt-ai-body::-webkit-scrollbar-thumb { background: var(--idt-border); border-radius: 6px; }

/* ── IDLE / COMMAND PALETTE (IMAGE 2 MATCH) ───────────────────────────── */
.idt-ai-idle {
padding: 60px 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.idt-ai-idle-header { margin-bottom: 40px; }
.idt-ai-idle-title { font-family: var(--idt-font-ui); font-size: 26px; font-weight: 800; color: var(--idt-navy); margin: 0 0 10px; }
.idt-ai-idle-sub { font-family: var(--idt-font-ui); font-size: 16px; color: var(--idt-ink-muted); margin: 0; }
.idt-ai-sug-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.idt-ai-sug-item {
display: flex; align-items: center; background: #ffffff;
border: 1px solid var(--idt-border); padding: 12px 24px;
border-radius: 50px; cursor: pointer; transition: all 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.idt-ai-sug-item:hover { border-color: var(--idt-blue); background: var(--idt-blue-tint); transform: translateY(-2px); }
.idt-ai-sug-icon { width: 18px; height: 18px; stroke: var(--idt-blue); stroke-width: 2.5; fill: none; margin-right: 12px;}
.idt-ai-sug-info { display: flex; align-items: center; }
.idt-ai-sug-title { font-family: var(--idt-font-ui); font-size: 14px; font-weight: 600; color: var(--idt-navy);}
.idt-ai-sug-desc { display: none !important; }
.idt-ai-sug-arrow { display: none !important; }

/* ── CHAT ZONE (IMAGE 3 MATCH) ────────────────────────────────────────── */
.idt-ai-chat-zone {
padding: 10px 60px 20px;
display: flex;
flex-direction: column;
gap: 24px;
}
.idt-ai-chat-user {
align-self: flex-end;
max-width: 80%;
}
.idt-ai-user-bubble {
background: #e2e8f0;
color: var(--idt-navy);
padding: 14px 28px;
border-radius: 30px 30px 4px 30px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.idt-ai-chat-ai {
align-self: flex-start;
max-width: 85%;
display: flex;
gap: 16px;
align-items: flex-end;
}
.idt-ai-ai-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--idt-navy);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(0,0,54,0.15);
}
.idt-ai-ai-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; }
.idt-ai-ai-bubble {
background: var(--idt-navy);
color: #ffffff;
padding: 16px 28px;
border-radius: 30px 30px 30px 4px;
font-size: 14.5px;
font-weight: 500;
box-shadow: 0 8px 25px rgba(0,0,54,0.15);
}

/* Typing indicator */
.idt-ai-typing { display: flex; align-items: center; gap: 5px; height: 20px;}
.idt-ai-typing span { width: 6px; height: 6px; background: #38bdf8; border-radius: 50%; animation: idt-ai-bounce 1.4s infinite ease-in-out both; }
.idt-ai-typing span:nth-child(1) { animation-delay: -0.32s; }
.idt-ai-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes idt-ai-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ── RESULTS HEADER BAR ───────────────────────────────────────────────── */
.idt-ai-res-header {
padding: 10px 60px 20px;
border-bottom: 2px solid var(--idt-border);
margin-bottom: 30px;
}
.idt-ai-res-count {
font-family: var(--idt-font-ui);
font-size: 15px;
font-weight: 800;
color: var(--idt-ink-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.8;
}
.idt-ai-res-count span { color: var(--idt-red); font-size: 17px; }

/* ==========================================================================
── PRODUCT CARD — "SPEC-SHEET" REDESIGN (2-per-row) ──────────────────────
========================================================================== */
.idt-ai-products-wrap {
padding: 0 60px;
display: grid;
grid-template-columns: repeat(2, 1fr); /* Cards 2k enna */
gap: 24px;
}

.idt-ai-product-card {
background: var(--idt-navy-tint);
border: 1px solid var(--idt-navy-border);
border-radius: 22px;
padding: 22px 22px 20px;
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.idt-ai-product-card:hover {
box-shadow: 0 20px 45px rgba(0, 0, 54, 0.08);
transform: translateY(-3px);
border-color: #c3cadd;
}

/* Top row: title+PID left / flag+location+price right */
.idt-ai-pc-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.idt-ai-pc-title-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.idt-ai-pc-cat-badge {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--idt-red);
background: var(--idt-red-tint);
border: 1px solid var(--idt-red-border);
padding: 3px 10px;
border-radius: 20px;
width: fit-content;
}
.idt-ai-pc-title { font-size: 22px; font-weight: 800; color: var(--idt-navy); margin: 0; line-height: 1.2; }
.idt-ai-pc-cpu { display: flex; align-items: center; gap: 7px; font-family: var(--idt-font-data); font-size: 12.5px; font-weight: 600; color: var(--idt-ink-muted); }
.idt-ai-pc-cpu svg { width: 15px; height: 15px; stroke: var(--idt-blue); flex-shrink: 0; }
.idt-ai-pc-pid {
display: inline-flex;
align-items: center;
font-family: var(--idt-font-data);
font-size: 12px;
font-weight: 700;
color: var(--idt-navy-70);
background: #ffffff;
border: 1px solid var(--idt-navy-border);
padding: 5px 12px;
border-radius: 8px;
width: fit-content;
}

.idt-ai-pc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.idt-ai-pc-loc {
display: flex; align-items: center; gap: 8px;
color: var(--idt-navy); font-size: 13px; font-weight: 700;
}
.idt-ai-pc-loc svg { width: 15px; height: 15px; stroke: var(--idt-ink-muted); stroke-width: 2.2; fill: none; flex-shrink: 0; }
.idt-ai-pc-flag { width: 22px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.idt-ai-pc-price { display: flex; align-items: baseline; line-height: 1; gap: 2px; }
.idt-ai-pc-currency { font-family: var(--idt-font-ui); font-size: 20px; font-weight: 800; color: var(--idt-green); }
.idt-ai-pc-amount { font-family: var(--idt-font-ui); font-size: 34px; font-weight: 800; color: var(--idt-green); }
.idt-ai-pc-extra { font-family: var(--idt-font-ui); font-size: 12px; font-weight: 800; color: var(--idt-red); margin-left: 4px; align-self: center; }
.idt-ai-pc-term { font-size: 14px; color: var(--idt-ink-muted); font-weight: 700; margin-left: 2px; align-self: flex-end; }

/* Spec grid — 2 columns of white boxes */
.idt-ai-pc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
.idt-ai-pc-spec {
background: #ffffff;
border-radius: 14px;
padding: 12px 16px;
min-width: 0;
}
.idt-ai-pc-spec-lbl {
display: flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
color: var(--idt-ink-faint);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 5px;
}
.idt-ai-pc-spec-lbl svg { width: 13px; height: 13px; stroke: var(--idt-ink-muted); stroke-width: 2.4; fill: none; flex-shrink: 0; }
.idt-ai-pc-spec-val { font-family: var(--idt-font-ui); font-size: 15px; font-weight: 800; color: var(--idt-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Feature chips */
.idt-ai-pc-features { display: flex; gap: 8px; margin-bottom: 11px;display: none; }
.idt-ai-pc-chip { gap: 7px; padding: 8px; background: #ffffff; border: 1px solid var(--idt-navy-border); border-radius: 12px; font-size: 11.5px; font-weight: 700; color: var(--idt-navy); }
.idt-ai-pc-chip svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--idt-blue) !important; stroke-width: 3; fill: none; display: none; }
.idt-ai-pc-chip-fill { fill: var(--idt-blue); stroke: none !important;}

/* Buy Now — full-width orange bar */
.idt-ai-pc-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--idt-orange);
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 14px 20px;
border-radius: 14px;
transition: all 0.2s ease;
}
.idt-ai-pc-btn:hover { background: var(--idt-orange-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(245, 135, 31, 0.3); }
.idt-ai-pc-btn svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.2; fill: none; }

/* ── LOAD MORE & EMPTY STATES ─────────────────────────────────────────── */
.idt-ai-load-more-wrap { text-align: center; padding: 20px 60px 40px; }
.idt-ai-load-more-btn {
background: #ffffff; color: var(--idt-navy); border: 2px solid var(--idt-border);
font-size: 14px; font-weight: 700; padding: 12px 36px; border-radius: 50px;
cursor: pointer; transition: all 0.2s ease;
}
.idt-ai-load-more-btn:hover { border-color: var(--idt-blue); color: var(--idt-blue); }
.idt-ai-empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.idt-ai-empty-state-container svg { width: 50px; height: 50px; stroke: var(--idt-ink-faint); margin-bottom: 16px; }
.idt-ai-empty-title { font-size: 18px; font-weight: 800; color: var(--idt-navy); margin: 0 0 8px; }
.idt-ai-empty-subtitle { font-size: 14px; color: var(--idt-ink-muted); margin: 0; }
.idt-ai-reset-button { margin-top: 24px; padding: 12px 28px; background: #ffffff; color: var(--idt-navy); font-size: 14px; font-weight: 700; border: 1px solid var(--idt-border); border-radius: 50px; cursor: pointer; transition: all 0.2s ease; }
.idt-ai-reset-button:hover { border-color: var(--idt-blue); color: var(--idt-blue); }
.idt-ai-empty-subtitle a{
   height: 44px;
    padding: 0 28px;
    background: var(--idt-blue);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: var(--idt-font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.idt-ai-products-wrap { grid-template-columns: 1fr; } /* Tablet/small laptop: back to 1 card per row */
.idt-ai-pc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.idt-ai-pc-header { flex-direction: column; gap: 16px; }
.idt-ai-pc-header-right { align-items: flex-start; }
.idt-ai-product-card { padding: 18px 18px 16px; }
.idt-ai-pc-top { flex-direction: column; }
.idt-ai-pc-side { align-items: flex-start; width: 100%; }
.idt-ai-pc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.idt-ai-fab { bottom: 20px; left: 20px; }
.idt-ai-overlay { padding: 0; align-items: flex-end; }
.idt-ai-modal { max-height: 95vh; border-radius: 24px 24px 0 0; }
.idt-ai-header { padding: 20px 24px; }
.idt-ai-chat-zone, .idt-ai-search-zone, .idt-ai-res-header, .idt-ai-products-wrap, .idt-ai-load-more-wrap { padding-left: 24px; padding-right: 24px; }
.idt-ai-idle { padding: 40px 24px; }
.idt-ai-pc-title { font-size: 20px; }
.idt-ai-pc-grid { grid-template-columns: 1fr; }
.idt-ai-pc-grid-item { border-right: none !important; }
.idt-ai-pc-grid-item:nth-last-child(2) { border-bottom: 1px solid #e2e8f0; }
}