/* Storefront chat widget — customer_widget.css
   Static CSS extracted from blocks/chat_widget.tpl (was ~314 lines
   inline). Admin-configurable colors (button_bg / button_fg /
   header_bg / header_fg) are passed via inline `style` on the widget
   root as CSS custom properties, so this file stays fully static and
   the browser can cache it across pages. */

/* Fallback defaults for the CSS custom properties the widget root
   sets inline. If the template ever fails to emit them, the widget
   still renders with sane brand-neutral colors. */
.cm-ai-chat {
    --cm-ai-btn-bg:    #111111;
    --cm-ai-btn-fg:    #ffffff;
    --cm-ai-hdr-bg:    #111111;
    --cm-ai-hdr-fg:    #ffffff;
    --cm-ai-shadow:    0 8px 24px rgba(0,0,0,0.18);
    position: fixed !important;
    bottom: 24px !important;
    z-index: 999998;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
.cm-ai-chat[data-position="bottom-right"] { right: 24px !important; left: auto !important; }
.cm-ai-chat[data-position="bottom-left"]  { left: 24px !important;  right: auto !important; }

/* Launcher — 60px circle icon-only, click to open */
.cm-ai-chat__launcher {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--cm-ai-btn-bg);
    color: var(--cm-ai-btn-fg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--cm-ai-shadow);
    padding: 0;
    transition: transform 0.15s ease;
    position: relative;
}
.cm-ai-chat__launcher:hover { transform: scale(1.05); }
/* Both icons stacked at the launcher center so we can cross-fade +
   rotate between them. The chat bubble is visible when closed,
   the X takes over when the panel is open. Prefers-reduced-motion
   skips the rotate portion but keeps the opacity swap. */
.cm-ai-chat__launcher svg {
    width: 28px; height: 28px;
    fill: currentColor;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transition: transform 0.28s cubic-bezier(.4,.15,.3,1), opacity 0.22s ease;
}
.cm-ai-chat__launcher-chat  { opacity: 1; }
.cm-ai-chat__launcher-close { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.6); }
.cm-ai-chat--open .cm-ai-chat__launcher-chat  { opacity: 0; transform: translate(-50%, -50%) rotate(90deg)  scale(0.6); }
.cm-ai-chat--open .cm-ai-chat__launcher-close { opacity: 1; transform: translate(-50%, -50%) rotate(0deg)   scale(1);   }
@media (prefers-reduced-motion: reduce) {
    .cm-ai-chat__launcher svg { transition: opacity 0.15s ease; transform: translate(-50%, -50%); }
    .cm-ai-chat__launcher-close { transform: translate(-50%, -50%); }
    .cm-ai-chat--open .cm-ai-chat__launcher-chat  { transform: translate(-50%, -50%); }
    .cm-ai-chat--open .cm-ai-chat__launcher-close { transform: translate(-50%, -50%); }
}

/* Hover tooltip — shows the "Button text" setting on hover, hidden without it */
.cm-ai-chat__tooltip {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    background: #111;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cm-ai-chat[data-position="bottom-right"] .cm-ai-chat__tooltip { right: calc(100% + 12px); }
.cm-ai-chat[data-position="bottom-left"]  .cm-ai-chat__tooltip { left:  calc(100% + 12px); }
.cm-ai-chat__launcher:hover .cm-ai-chat__tooltip { opacity: 1; }
.cm-ai-chat__launcher:hover .cm-ai-chat__tooltip:empty { opacity: 0; }
.cm-ai-chat--open .cm-ai-chat__tooltip { opacity: 0 !important; }

/* Panel */
.cm-ai-chat__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    width: 380px;
    height: 620px;
    max-height: calc(100vh - 100px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: var(--cm-ai-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.cm-ai-chat[data-position="bottom-right"] .cm-ai-chat__panel { right: 0; }
.cm-ai-chat[data-position="bottom-left"]  .cm-ai-chat__panel { left:  0; }
.cm-ai-chat.cm-ai-chat--open .cm-ai-chat__panel { display: flex; }

/* Header */
.cm-ai-chat__header {
    background: var(--cm-ai-hdr-bg);
    color: var(--cm-ai-hdr-fg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
}
.cm-ai-chat__logo { height: 24px; width: auto; flex-shrink: 0; }
.cm-ai-chat__header-title { flex: 1; font-weight: 600; font-size: 15px; color: var(--cm-ai-hdr-fg); }
.cm-ai-chat__header-btn {
    background: transparent; border: none; padding: 6px;
    cursor: pointer; color: var(--cm-ai-hdr-fg);
    display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.cm-ai-chat__header-btn:hover { background: rgba(255,255,255,0.14); }
.cm-ai-chat__header-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* Icon color already inherits from var(--cm-ai-hdr-fg) on line 120 —
   whatever font color the admin set for the header text also applies
   to the menu / close icons. When the header background is LIGHT, use
   a translucent-BLACK hover instead of the default translucent-white
   (which would be invisible on a light background). */
.cm-ai-chat--light-icons .cm-ai-chat__header-btn:hover { background: rgba(0,0,0,0.08); }

/* Header menu */
.cm-ai-chat__menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    background: #fff;
    color: #222;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 4px 0;
    display: none;
    z-index: 3;
}
.cm-ai-chat--menu-open .cm-ai-chat__menu-panel { display: block; }
.cm-ai-chat__menu-item {
    display: block; width: 100%;
    padding: 10px 16px;
    background: transparent; border: none;
    text-align: left; cursor: pointer;
    font-size: 14px; color: #222;
    font-family: inherit;
}
.cm-ai-chat__menu-item:hover { background: #f5f5f5; }

/* Messages body */
.cm-ai-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cm-ai-chat__msg { display: flex; }
.cm-ai-chat__msg--user { justify-content: flex-end; }
.cm-ai-chat__msg-body { max-width: 88%; }
.cm-ai-chat__msg--user .cm-ai-chat__msg-body { text-align: right; }
.cm-ai-chat__agent-name { font-size: 12px; color: #666; margin-bottom: 3px; font-weight: 600; }
.cm-ai-chat__bubble {
    display: inline-block;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    background: #fff !important;
    color: #222 !important;
    word-wrap: break-word;
    text-align: left;
}
.cm-ai-chat__msg--user .cm-ai-chat__bubble {
    background: #f0f0f0 !important;
    color: #222 !important;
    border-color: transparent;
}
.cm-ai-chat__msg--error .cm-ai-chat__bubble {
    background: #fdf3f2 !important;
    border-color: #f5c6c3;
    color: #a94442 !important;
}
.cm-ai-chat__bubble-image { max-width: 200px; border-radius: 6px; margin-bottom: 6px; display: block; }
.cm-ai-chat__bubble a { color: #4a6fa5; text-decoration: underline; }
.cm-ai-chat__bubble p { margin: 0 0 6px; }
.cm-ai-chat__bubble p:last-child { margin-bottom: 0; }

/* Suggested-question chips */
.cm-ai-chat__chips {
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 6px;
    padding: 0 14px 8px;
}
.cm-ai-chat__chip {
    background: transparent;
    border: 1px solid #ccc;
    color: #222;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    font-family: inherit;
}
.cm-ai-chat__chip:hover { background: #f5f5f5; }

/* Product cards */
/* Product-card strip — horizontally scrollable row of cards. Grid
   variant wraps to multiple rows on wider layouts. `align-items:
   stretch` guarantees every card in the row is the same height so
   "Add to cart" buttons line up even when some cards are out of
   stock (button hidden) and their neighbors are not. */
.cm-ai-chat__cards {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    gap: 10px;
    margin-top: 10px;
    padding-bottom: 6px;
}
.cm-ai-chat__cards--grid   { flex-wrap: wrap; }
.cm-ai-chat__cards--bundle { margin-top: 12px; }

.cm-ai-chat__card {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
    background: #fff !important;
    color: #222 !important;
    text-decoration: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cm-ai-chat__card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Image slot — fixed 120px so every card in the strip lines up on
   the info-section boundary. Empty variant keeps the same slot so
   text alignment stays consistent. */
.cm-ai-chat__card-img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #f5f5f5;
    padding: 6px;
    box-sizing: border-box;
    display: block;
    border-bottom: 1px solid #eee;
}
.cm-ai-chat__card-img--empty { background: #f5f5f5; }

/* Info section fills the remainder + stacks children with even
   spacing. flex:1 pushes the CTA to the bottom edge regardless of
   name-line count (1 vs 2 lines truncated), so buttons line up
   across cards in the same row. */
.cm-ai-chat__card-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.cm-ai-chat__card-name {
    font-size: 13px;
    font-weight: 500;
    color: #222 !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 8px 4px 8px;
}
.cm-ai-chat__card-price {
    font-size: 14px;
    font-weight: 600;
    color: #222 !important;
    margin: 0;
    padding: 0 8px;
}

/* Stock indicator — subtle, visually distinct from price. Uses the
   filled dot glyph so it reads even without color. */
.cm-ai-chat__card-stock {
    font-size: 12px;
    color: #2b8a3e !important;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-bottom: 6px;
}
.cm-ai-chat__card-stock::before   { content: "\2022"; font-size: 16px; line-height: 0; }
.cm-ai-chat__card-stock--out      { color: #999 !important; }

/* Add-to-cart CTA — pinned to bottom via mt:auto so cards with
   short names/prices still have the button aligned across the row. */
.cm-ai-chat__card-cta {
    margin-top: auto;
    background: var(--cm-ai-hdr-bg);
    color: var(--cm-ai-hdr-fg) !important;
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: opacity 0.15s ease;
}
.cm-ai-chat__card-cta:hover        { opacity: 0.88; }
.cm-ai-chat__card-cta:disabled     { opacity: 0.5; cursor: not-allowed; }

/* Follow-up chips */
.cm-ai-chat__followups { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cm-ai-chat__chip--followup {
    background: transparent;
    border: 1px solid #ccc; color: #222 !important;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px; cursor: pointer; font-family: inherit;
}
.cm-ai-chat__chip--followup:hover { background: #f5f5f5; }

/* Feedback bar */
.cm-ai-chat__feedback { display: flex; gap: 4px; margin-top: 4px; opacity: 0.55; transition: opacity 0.15s; }
.cm-ai-chat__msg:hover .cm-ai-chat__feedback { opacity: 1; }
.cm-ai-chat__feedback-btn {
    background: transparent !important; border: none;
    padding: 4px 6px; cursor: pointer; border-radius: 4px;
    color: #666 !important; font-family: inherit;
    display: inline-flex; align-items: center;
}
.cm-ai-chat__feedback-btn:hover { background: #f0f0f0 !important; color: #222 !important; }
.cm-ai-chat__feedback-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Typing indicator */
.cm-ai-chat__typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
.cm-ai-chat__typing span {
    width: 6px; height: 6px; border-radius: 50%; background: #999;
    animation: cm-ai-typing-bounce 1.2s infinite;
}
.cm-ai-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.cm-ai-chat__typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cm-ai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Composer footer — pill-input on the left + solid Send button on the right.
   Icons (voice, attach) live INSIDE the input on the right edge. */
.cm-ai-chat__composer {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eef0f2;
    flex-shrink: 0;
    background: #fff;
}
.cm-ai-chat__input-wrap {
    flex: 1; min-width: 0;
    position: relative;
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 999px;
    padding: 0 8px 0 14px;
    transition: border-color .15s ease;
}
.cm-ai-chat__input-wrap:focus-within {
    border-color: #9ca0a6;
}
.cm-ai-chat__input {
    flex: 1;
    background: transparent;
    border: none !important;
    outline: none;
    padding: 10px 4px !important;
    margin: 0 !important;
    font-size: 14px;
    color: #1f2937;
    font-family: inherit;
    min-width: 0;
    height: auto;
    border-radius: 5px !important;
    box-shadow: none;
}
.cm-ai-chat__input::placeholder { color: #98a0aa; }
.cm-ai-chat__input:focus { border-color: transparent !important; box-shadow: none !important; }
.cm-ai-chat__input-actions {
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 0;
}
.cm-ai-chat__attach, .cm-ai-chat__voice {
    background: transparent; border: none; border-radius: 50%;
    width: 30px; height: 30px; padding: 0; cursor: pointer; color: #6b7280;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}
.cm-ai-chat__attach:hover, .cm-ai-chat__voice:hover {
    background: #f3f4f6; color: #111827;
}
.cm-ai-chat__attach svg, .cm-ai-chat__voice svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
}
.cm-ai-chat__send {
    background: #111111; color: #ffffff;
    border: none; padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; flex-shrink: 0;
    transition: background-color .15s ease, transform .05s ease;
}
.cm-ai-chat__send:hover { background: #000000; }
.cm-ai-chat__send:active { transform: scale(0.97); }
.cm-ai-chat__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Attach preview — modern-messenger style with thumbnail card + hover-reveal
   remove button. Shows above the composer once a shopper picks a file. */
.cm-ai-chat__attach-preview {
    display: none;
    align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #f7f8fa;
    border-top: 1px solid #e6e6e6;
    font-size: 13px;
    color: #374151;
    position: relative;
}
.cm-ai-chat__attach-preview.is-active { display: flex; }

/* Thumbnail card — 56×56 rounded with a subtle border + shadow */
.cm-ai-chat__attach-preview img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e0e3e8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    background: #fff;
    flex-shrink: 0;
}

/* File name — truncate long names with ellipsis */
.cm-ai-chat__attach-preview [data-cm-ai-attach-name] {
    flex: 1; min-width: 0;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove — circular × button, positioned as an overlay on the thumbnail
   top-right for the "chip" pattern most messengers use. */
.cm-ai-chat__attach-remove {
    position: absolute;
    top: 4px; left: 56px;      /* nudge over the thumb's top-right corner */
    background: #111827;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 20px; height: 20px;
    padding: 0;
    font-size: 12px; line-height: 16px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background-color .12s ease, transform .08s ease;
}
.cm-ai-chat__attach-remove:hover { background: #dc2626; }
.cm-ai-chat__attach-remove:active { transform: scale(0.92); }

/* Mobile — panel fills viewport */
@media (max-width: 480px) {
    .cm-ai-chat { bottom: 12px !important; }
    .cm-ai-chat[data-position="bottom-right"] { right: 12px !important; }
    .cm-ai-chat[data-position="bottom-left"]  { left:  12px !important; }
    .cm-ai-chat__panel {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw; height: 100vh; max-height: 100vh;
        border-radius: 0;
    }
    .cm-ai-chat[data-show-mobile="N"] { display: none !important; }
}

/* RTL */
.cm-ai-chat[dir="rtl"] .cm-ai-chat__msg--user  { justify-content: flex-start; }
.cm-ai-chat[dir="rtl"] .cm-ai-chat__msg-body   { text-align: right; }

/* ============================================================
   Feature #26 — mobile fullscreen (class-based, JS toggles it
   so admin can opt out via chat_mobile_fullscreen setting)
   ============================================================ */
.cm-ai-chat--mobile .cm-ai-chat__panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0;
    z-index: 100000;
}
.cm-ai-chat--mobile .cm-ai-chat__launcher {
    z-index: 100001;
}

/* ============================================================
   Feature #4 — compare card
   ============================================================ */
.cm-ai-chat__compare {
    margin-top: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cm-ai-chat__compare-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1px;
    background: #f0f2f5;
    border-bottom: 1px solid #e5e7eb;
}
.cm-ai-chat__compare-col {
    background: #fff;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}
.cm-ai-chat__compare-col:hover { background: #fafbfc; }
.cm-ai-chat__compare-img {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: #f0f2f5;
    display: block;
    margin: 0 auto 6px;
}
.cm-ai-chat__compare-name {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cm-ai-chat__compare-price { font-size: 13px; font-weight: 700; color: #111; }
.cm-ai-chat__compare-rating { font-size: 11px; color: #f59e0b; margin-top: 2px; }
.cm-ai-chat__compare-attrs { padding: 4px 0; }
.cm-ai-chat__compare-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid #f0f2f5;
    font-size: 12px;
}
.cm-ai-chat__compare-row:first-child { border-top: 0; }
.cm-ai-chat__compare-label { color: #6b7280; font-weight: 500; }
.cm-ai-chat__compare-val {
    color: #111;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}
.cm-ai-chat__compare-attrs .cm-ai-chat__compare-row:not(:first-child) .cm-ai-chat__compare-val {
    grid-template-columns: none;
}

/* ============================================================
   Feature #9 — order tracking card
   ============================================================ */
.cm-ai-chat__track {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}
.cm-ai-chat__track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}
.cm-ai-chat__track-status {
    padding: 3px 8px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.cm-ai-chat__track-timeline {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    justify-content: space-between;
}
.cm-ai-chat__track-stage {
    flex: 1;
    text-align: center;
}
.cm-ai-chat__track-dot {
    width: 12px; height: 12px;
    background: #e5e7eb;
    border-radius: 50%;
    margin: 0 auto 4px;
}
.cm-ai-chat__track-stage.is-reached .cm-ai-chat__track-dot { background: #10b981; }
.cm-ai-chat__track-lbl { font-size: 10px; color: #6b7280; }
.cm-ai-chat__track-stage.is-reached .cm-ai-chat__track-lbl { color: #111; font-weight: 600; }
.cm-ai-chat__track-ship {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #f7f8fa;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}
.cm-ai-chat__track-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.cm-ai-chat__track-details {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #6b7280;
    text-decoration: none;
    font-size: 12px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f5;
}