/* ── AI Chat Page ──────────────────────────────────────────────────
   Font and CSS variables are inherited from kala-front.css
   ────────────────────────────────────────────────────────────────── */

body.km-ai-page {
    overflow: hidden;
    padding-bottom: 0;
}

body.km-ai-page .footer,
body.km-ai-page .mobile-nav {
    display: none;
}

@media (max-width: 720px) {
    body.km-ai-page .mobile-header,
    body.km-ai-page .top-banner,
    body.km-ai-page .mega-menu {
        display: none !important;
    }
}

.km-ai-chat-page {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    /* height set via JS to fill remaining viewport */
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.km-ai-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.km-ai-topbar-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.km-ai-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s;
}

.km-ai-back-btn:hover {
    background: var(--bg, #f5f5f5);
}

.km-ai-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.km-ai-history-btn {
    background: transparent;
    color: var(--text);
}

.km-ai-history-btn:hover {
    background: var(--bg, #f5f5f5);
}

.km-ai-new-chat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

.km-ai-new-chat-btn:hover {
    background: var(--primary-l);
}

@media (max-width: 380px) {
    .km-ai-new-chat-label {
        display: none;
    }

    .km-ai-new-chat-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

/* ── Chat body ─────────────────────────────────────────────────── */
.km-ai-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-behavior: smooth;
    min-height: 0;
}

.km-ai-chat-body::-webkit-scrollbar {
    width: 6px;
}

.km-ai-chat-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 6px;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.km-ai-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 40px 20px;
    min-height: 300px;
}

.km-ai-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 14px;
}

.km-ai-empty h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.km-ai-empty p {
    font-size: 14px;
    color: var(--muted);
    max-width: 340px;
    line-height: 1.9;
}

/* ── Messages ─────────────────────────────────────────────────── */
.km-ai-msg-row {
    display: flex;
    width: 100%;
}

.km-ai-bubble-user {
    background: #f1f5f9;
    color: var(--text);
    padding: 14px 18px;
    border-radius: 18px 18px 18px 4px;
    font-size: 14px;
    line-height: 2;
    max-width: 80%;
}

.km-ai-response {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.km-ai-response h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text);
}

.km-ai-response p {
    font-size: 14px;
    line-height: 2.1;
    color: var(--muted);
}

/* ── Typing indicator ─────────────────────────────────────────── */
.km-ai-typing {
    display: flex;
    gap: 5px;
    padding: 6px 0;
}

.km-ai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .3;
    animation: km-ai-blink 1.2s infinite;
}

.km-ai-typing span:nth-child(2) { animation-delay: .2s; }
.km-ai-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes km-ai-blink {
    0%, 80%, 100% { opacity: .25; transform: scale(.85); }
    40% { opacity: 1; transform: scale(1); }
}

/* ── Product grid inside AI response ─────────────────────────── */
/* Single scrollable row, not a wrapping grid — a comparison reply
   (compareShownProducts()) can return more than MAX_RESULTS products (the
   previously-shown set concatenated with a newly-searched brand's own set,
   with no also_consider split at all), which silently wrapped into a second
   row here before: 8 cards in a 2×4 grid for what the user asked about as a
   handful of specific products. Matches .km-ai-more-panel's existing
   horizontal-scroll pattern below, so .product-card's own base fixed width
   applies (not stretched to a grid column) — same fix, same reasoning. */
.km-ai-product-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    margin-top: 4px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.km-ai-product-grid .product-card {
    scroll-snap-align: start;
}

.km-ai-product-grid .pc-title {
    -webkit-line-clamp: 4;
    height: calc(1.7em * 4);
}

.km-ai-product-grid .pc-rating-row {
    display: flex;
    margin-right: 0;
}

/* ── "Show more" toggle for extra matches beyond the top picks ──── */
.km-ai-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #64748b);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.km-ai-show-more-btn:hover {
    background: var(--surface-hover, rgba(0, 0, 0, .04));
    color: inherit;
}

.km-ai-show-more-btn svg {
    transition: transform .15s ease;
}

.km-ai-show-more-btn.is-open svg {
    transform: rotate(180deg);
}

/* Horizontal scroll row, not a wrapped grid — this panel can hold any number
   of extra matches (no MAX_RESULTS-style cap applies here), so it needs to
   stay usable regardless of count instead of growing the page vertically.
   Deliberately does NOT use .km-ai-product-grid — .product-card's own base
   width (220px, flex-shrink:0, see kala-front.css) is exactly what a
   horizontal-scroll row needs, and the grid class's width:100% override
   would collapse every card to the container's full width instead. */
.km-ai-more-panel {
    margin-top: 12px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

/* The [hidden] attribute is how kala-ai.js collapses this panel by default —
   but the browser's own [hidden] { display: none } UA rule and the class rule
   above have equal specificity (both a single attribute/class selector), so
   whichever the browser happens to apply later wins the tie, and in practice
   that has meant this panel showing OPEN by default instead of collapsed.
   Pairing the attribute with the class here is unambiguously more specific
   than either alone, so this always wins regardless of rule order. */
.km-ai-more-panel[hidden] {
    display: none;
}

.km-ai-more-panel .product-card {
    scroll-snap-align: start;
}

/* .pc-title's base rule (kala-front.css) clamps to 2 lines with a fixed
   height sized for that clamp — a longer title (e.g. "HP Omnibook X Flip AI
   2-in-1 14-KB0004NT/ Intel® Core...") got cut off mid-word inside that
   height instead of finishing the line, since .km-ai-product-grid's own
   4-line override above never applied here. Same override, same reasoning. */
.km-ai-more-panel .pc-title {
    -webkit-line-clamp: 4;
    height: calc(1.7em * 4);
}

/* ── Typing wait message ─────────────────────────────────────── */
.km-ai-typing-msg {
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-2);
    margin-bottom: 10px;
}

/* ── Sales reply text ────────────────────────────────────────── */
.km-ai-sales-reply {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    color: var(--text-1);
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: 12px;
}

/* ── Markdown in assistant messages ──────────────────────────── */
.km-ai-markdown {
    font-size: 14px;
    line-height: 2;
    color: var(--text-1);
    font-weight: 400;
}

.km-ai-markdown p {
    margin: 0 0 10px;
    color: var(--text-1);
    font-size: 14px;
    line-height: 2;
}

.km-ai-markdown p:last-child {
    margin-bottom: 0;
}

.km-ai-markdown strong {
    font-weight: 700;
    color: var(--text);
}

.km-ai-markdown em {
    font-style: italic;
}

.km-ai-markdown ul,
.km-ai-markdown ol {
    margin: 8px 0 12px;
    padding-inline-start: 20px;
    padding-inline-end: 0;
}

.km-ai-markdown li {
    margin-bottom: 6px;
    color: var(--text-1);
}

.km-ai-markdown h3,
.km-ai-markdown h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 12px 0 8px;
    color: var(--text);
}

.km-ai-response > .km-ai-markdown:first-child {
    margin-top: 0;
}

.km-ai-sales-reply.km-ai-markdown {
    margin-top: 0;
}

/* ── Comparison table ────────────────────────────────────────── */
.km-ai-table-wrap {
    margin: 4px 0 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.km-ai-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.km-ai-table-wrap th,
.km-ai-table-wrap td {
    padding: 8px 12px;
    text-align: start;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.km-ai-table-wrap th:not(:last-child),
.km-ai-table-wrap td:not(:last-child) {
    border-inline-end: 1px solid var(--border);
}

.km-ai-table-wrap thead th {
    background: var(--bg, #f5f5f5);
    font-weight: 700;
    color: var(--text);
}

.km-ai-table-wrap tbody tr:last-child td {
    border-bottom: none;
}

/* ── Closing follow-up question, rendered below the product cards ──── */
.km-ai-closing-question {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
    color: var(--text);
}

.km-ai-closing-question p {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.km-ai-closing-question p:last-child {
    margin-bottom: 0;
}

/* ── Digikala price link ──────────────────────────────────────── */
.km-ai-dk-link {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 11.5px;
    color: #e3263a;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 5px 8px;
    background: #fff5f5;
    transition: background .15s;
    direction: rtl;
}

.km-ai-dk-link:hover {
    background: #fee2e2;
}

/* ── Input bar ─────────────────────────────────────────────────── */
.km-ai-input-wrap {
    padding: 12px 56px 20px;
    flex-shrink: 0;
    background: var(--white);
}

.km-ai-input-bar {
    border: 1.5px solid var(--primary);
    border-radius: 18px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.km-ai-input-bar textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    max-height: 120px;
    padding: 8px 4px;
    background: transparent;
    direction: ltr;
    text-align: left;
}

.km-ai-input-bar textarea::placeholder {
    color: #b4b4b8;
}

.km-ai-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, opacity .15s;
}

.km-ai-mic-btn {
    background: var(--primary-l);
    color: var(--primary);
}

/* حالت ۲: در حال ضبط */
.km-ai-mic-btn.recording {
    background: #fef2f2;
    color: var(--red);
    animation: km-ai-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes km-ai-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
    50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}

/* حالت ۳: در انتظار پاسخ STT */
.km-ai-mic-btn.processing {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    animation: km-ai-mic-spin 1s linear infinite;
}

@keyframes km-ai-mic-spin {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.km-ai-send-btn {
    background: var(--primary);
    color: #fff;
}

.km-ai-send-btn:disabled {
    background: #fed7aa;
    cursor: default;
}

.km-ai-send-btn svg {
    transform: rotate(-90deg);
}

/* ── History panel (drawer) ────────────────────────────────────── */
.km-ai-history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.km-ai-history-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.km-ai-history-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 340px;
    max-width: 88vw;
    background: var(--white);
    box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
}

:dir(rtl) .km-ai-history-panel {
    transform: translateX(-100%);
}

.km-ai-history-panel.is-open {
    transform: translateX(0);
}

.km-ai-history-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

.km-ai-history-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.km-ai-history-item {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border-radius: 12px;
    transition: background .15s;
}

.km-ai-history-item:hover {
    background: var(--bg, #f5f5f5);
}

.km-ai-history-item-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    text-align: inherit;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    font-family: inherit;
}

.km-ai-history-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.km-ai-history-item-meta {
    font-size: 12px;
    color: var(--muted);
}

.km-ai-history-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-inline-end: 8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.km-ai-history-item-delete:hover {
    background: #fef2f2;
    color: var(--red);
}

.km-ai-history-empty,
.km-ai-history-loading,
.km-ai-history-error {
    padding: 40px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}

.km-ai-history-load-more {
    display: block;
    width: calc(100% - 16px);
    margin: 4px 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.km-ai-history-viewing-banner {
    background: var(--primary-l);
    color: var(--primary);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.9;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .km-ai-chat-body {
        padding: 20px 16px;
        gap: 18px;
    }

    .km-ai-input-wrap {
        padding: 10px 14px 16px;
    }

    .km-ai-product-grid {
        gap: 10px;
    }

    .km-ai-bubble-user {
        max-width: 92%;
        font-size: 13.5px;
    }

    .km-ai-response h3 { font-size: 15px; }
    .km-ai-response p  { font-size: 13.5px; }
    .km-ai-empty h2    { font-size: 18px; }
    .km-ai-empty p     { font-size: 13px; }

    .km-ai-history-panel {
        width: 100%;
        max-width: 100vw;
    }
}