/* widget.css – v0.7.57  (ensure product bullets line-break)
   • Same as v0.7.56 except .ai-sub li now has display:list-item
*/
/* Shadow-DOM base: isolate from theme/plugin CSS */
:host{
  all: initial;
  font: 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#000;
  display:block;
}
:host, * { box-sizing: border-box; }
/* ═════════ 1. Sidebar launcher ═════════ */
.ai-chat-toggle{display:none}   /* launcher hidden */
/* حذِف ::after والـ media والـ keyframes بالكامل */
/* ═════════ 2. Modal window ═════════ */
.ai-chat-window{
  position:relative;top:auto;left:auto;transform:none;   /* inline */
  width:100%;max-width:100%;height:70vh;display:flex;flex-direction:column;
  background:#000;border-radius:12px;overflow:hidden; 
  box-shadow:0 12px 40px rgba(0,0,0,.55);z-index:1;
  margin:0;                     /* no centred box—full-width row */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif
}
/* ─── Chat window when product column hidden ─────────── */
.ai-chat-window.narrow{
  width:100%;        /* full-width */
  max-width:100%;
  height:50vh;
}

/* احذف الـ media-query أعلاه بالكامل – لم تعد مطلوبة */

/* header */
.ai-chat-header{
  background:#000;color:#fff;padding:14px 16px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #333;user-select:none;
  border-top-left-radius:12px;      /* follow outer curve */
  border-top-right-radius:12px;
}
.ai-chat-close{display:none}    /* hide close icon */
/* Coveti logo inside the chat header */
.ai-chat-header .ai-logo{
  height:42px;          /* match header line-height */
  width:auto;
  margin-right:8px;     /* gap before the title text */
  flex-shrink:0;        /* never squish the logo */
}
/* ═════════ 3. Body columns ═════════ */
.ai-chat-body{flex:1;display:flex;overflow:hidden}
.ai-chat-col,.ai-prod-col{flex:1;overflow-y:auto;padding:16px}
.ai-chat-col{
  background:#fff;
  scrollbar-gutter:stable;   /* reserve gutter even when bar hidden */
}
.ai-prod-col{
  background:#fff;border-left:1px solid #eee;border-top-right-radius:0px;border-bottom-right-radius:0px;
  display:grid;gap:18px;scrollbar-gutter:stable;justify-items:center;
  grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:min-content;
  scroll-behavior:smooth;         /* enable smooth programmatic scrolls */
  overscroll-behavior:contain;    /* stop page from scrolling “through” */
}
@media(min-width:768px){  .ai-prod-col{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .ai-prod-col{grid-template-columns:repeat(3,1fr)} }

.ai-chat-col::-webkit-scrollbar,
.ai-prod-col::-webkit-scrollbar{width:6px}
.ai-chat-col::-webkit-scrollbar-thumb,
.ai-prod-col::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}

/* ═════════ 4. Chat bubbles ═════════ */
.ai-chat-bubble{                /* fill whole chat column */
  max-width:100%;padding:10px 14px;margin-bottom:10px;border-radius:8px;
  font-size:14px;line-height:1.4;white-space:pre-wrap
}
.ai-chat-bubble.user{margin-left:auto;background:#000;color:#fff}
.ai-chat-bubble.bot{
  background:#f2f2f2;color:#000;
  white-space:pre-line;line-height:1.45  /* honour \n */
}

/* ═════════ 5. Product card ═════════ */
.ai-product{
  width:100%;max-width:220px;display:flex;flex-direction:column;
  text-decoration:none;color:#000;background:#fff;
  border:1px solid #ddd;border-radius:8px;overflow:hidden;min-height:300px
}
.ai-product img{width:100%;height:180px;object-fit:cover}
.ai-title{
  font-size:14px;font-weight:600;margin:8px 8px 2px;text-align:center;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.ai-brand{font-size:13px;color:#555;margin:0 8px 4px;text-align:center}
.ai-price{font-size:14px;font-weight:700;color:#000;margin:0 8px 10px;text-align:center}

/* ═════════ 6. Footer & input bar ═════════ */
.ai-chat-footer{                       /* ← ADD BACK  */
  position: relative;           /* anchor for corner badge */
  padding:10px;
  --footer-pad: 10px;           /* keep in sync with padding */
  border-top:1px solid #eee;
  background:#fff;
  overflow:visible;          /* let the dropdown escape the window */
  border-bottom-left-radius:12px;   /* follow outer curve */
  border-bottom-right-radius:12px;
  /* ribbon clip radius (0 by default; becomes 30px when collapsed) */
  --footer-radius:0px;
}

/* ═════════ 6b. Corner badge (ribbon that HUGS the bar corner) ═════════ */
/* placed inside .ai-input-bar so it can clip to the rounded corner */
+/* Corner badge (now hugging the FOOTER corner) */
+.ai-try-ribbon{
  position:absolute;
  top:calc(-1 * var(--footer-pad));     /* offset padding so we use the OUTER corner */
  right:calc(-1 * var(--footer-pad));
  width:88px;                            /* square “corner box” */
  height:88px;
  pointer-events:none;      /* the wrapper never intercepts clicks */
  z-index:20;               /* above bar contents, below suggest box */
  overflow:hidden;          /* hard-clip whatever sticks out */
  border-top-right-radius:calc(var(--footer-radius) + var(--footer-pad)); /* clip to pill curve exactly */

}
.ai-try-ribbon .ai-try-link{
  position:absolute;
  position:absolute;
  /* Center the strap on the wrapper's center, independent of strap size */
  top:50%;
  right:50%;
  transform: translate(50%,-50%) rotate(45deg);
  display:flex;
  align-items:center;
  justify-content:center;
  width:134px;              /* strap length */
  height:28px;              /* strap thickness */
  text-align:center;
  text-decoration:none;
  color:#fff;
  text-transform:uppercase;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.08em;
  background: linear-gradient(135deg,#ff4d4f 0%,#c81d25 60%);
  padding:0;                /* use fixed height for perfect vertical centering */
  border-radius:4px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  pointer-events:auto;     /* clickable area */
  user-select:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* removed the “fold” triangles so nothing peeks outside the clip */
/* gentle hover focus */
.ai-try-ribbon .ai-try-link:hover,
.ai-try-ribbon .ai-try-link:focus{
  filter: brightness(1.05);
}
@media (max-width:600px){
  .ai-try-ribbon{ width:72px; height:72px; }        /* wrapper still centers */
  .ai-try-ribbon .ai-try-link{
    width:118px; height:26px; font-size:10.5px;
  }
}
/* Optional gold variant to match Coveti brand
.ai-try-ribbon .ai-try-link{
  background: linear-gradient(135deg,#d2b47a 0%,#bc964e 100%);
  color:#000;
}
*/
/* pill composer: grid (icons / input / icons) */
.ai-input-bar{
  --row-h:50px;
   --edge-pad: 8px;           
   --col-gap: 12px; /* grid gap used between columns */           
  display:grid;
  grid-template-columns:max-content max-content 1fr max-content max-content;
  grid-template-rows:var(--row-h);
  align-items:center;
  column-gap:var(--col-gap);
  width:100%;
  position:relative;
  border:1px solid #d9d9d9;
  border-radius:18px;
  overflow:hidden;
  /* give breathing room so icons aren't flush to the edges */
  padding-inline:var(--edge-pad); /* equal edges on all states */
}
/* Allow the dropdown to escape the bar only while it's visible */
.ai-input-bar.has-suggest{
  overflow: visible;
  z-index: 10;     /* float above footer’s glow */
}
/* Slightly taller control row on small screens so icons/text breathe */
@media (max-width:600px){
  .ai-input-bar{ --row-h:56px; }
}
.ai-input-bar.compact{ grid-template-rows:var(--row-h); }
.ai-input-bar.expanded{
  grid-template-rows:auto var(--row-h);
  row-gap:0;                 /* micro gap under text */
  padding-bottom:4px;
}
.ai-input-bar.expanded.has-preview{ grid-template-rows:auto auto var(--row-h); }

/* action icons – flat 32 px */
.ai-icon-btn{
  all:unset!important;display:flex!important;align-items:center;justify-content:center;
  width:32px;height:32px;cursor:pointer;line-height:0
}
.ai-icon-btn img{width:32px;height:32px;display:block;cursor:pointer}
.ai-icon-btn:hover img{opacity:.67}
/* place existing buttons by helper classes (added in JS) */
.ai-input-bar .ai-icon-btn.attach{ grid-column:1; grid-row:1; }
.ai-input-bar .ai-icon-btn.mic   { grid-column:2; grid-row:1; }
.ai-input-bar .ai-icon-btn.reset { grid-column:4; grid-row:1; }
.ai-input-bar .ai-icon-btn.send  { grid-column:5; grid-row:1; }
 /* send: align to the end, honoring the same edge padding as the camera */
 .ai-input-bar .ai-icon-btn.send{
   justify-self:end;
   margin-inline-end: 0 !important;        /* stay flush to the right edge */
 }
 .ai-input-bar .ai-icon-btn.send img{ display:block }
/* ═════════ 7. Thumbnail preview ═════════ */
.ai-preview{
  grid-column:1 / -1; grid-row:1; align-self:start;
  position:relative;width:140px;height:140px;border-radius:12px;overflow:hidden;
  display:none;flex-shrink:0;margin:8px 10px 0 10px;
}
.ai-preview img{width:100%;height:100%;object-fit:cover}
.ai-preview .ai-preview-close{
  all:unset;position:absolute;top:6px;right:6px;width:26px;height:26px;
  background:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3
}
/* keep the white X crisp & centered */
.ai-preview .ai-preview-close img{ display:block; width:16px; height:16px }
.ai-input-bar.has-preview .ai-preview{display:block}

/* ═════════ 8. Textarea ═════════ */
.ai-chat-input{
  grid-column:3; grid-row:1; align-self:center;
  flex:1 1 0; min-width:0; resize:none;     /* NEW: allow shrink inside grid */
  overflow-x:hidden; overflow-y:hidden;
  background:transparent; border:none; padding:0 6px 0 0; outline:none;
  /* bigger text like ChatGPT */
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#000; max-height:200px; min-height:1em;
}
/* expanded: input jumps above icons, wraps, and can grow */
.ai-input-bar.expanded .ai-chat-input{
  grid-column:1 / -1; grid-row:1;
  /* match side padding when expanded */
  padding:6px 12px 0 12px;     /* tiny top; 0 bottom for micro gap */
  overflow-y:auto;
}
.ai-input-bar.expanded.has-preview .ai-chat-input{ grid-row:2; }
.ai-probe{
  position:absolute; left:-9999px; top:auto; height:0; visibility:hidden;
  white-space:pre;
}
.ai-probe > span{ display:inline-block }
.ai-chat-input::-webkit-scrollbar{width:6px}
.ai-chat-input::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}

/* ═════════ 9. Utility for formatted reply ═════════ */
.ai-h3{
  margin:0 0 6px;font-weight:600;font-size:15px
}
.ai-list{
  list-style:none;
  padding:0 0 0 1.25rem;
  margin:0 0 6px;
}
.ai-list > li{margin:0 0 5px}

/* nested list for product bullets */
.ai-sub{
  margin:4px 0 4px 1.25rem;
  padding:0;
  list-style:circle
}
/* NEW: force each title onto its own line */
.ai-sub li{
  margin:2px 0;
  display:list-item;           /* ensures proper line-break */
}

/* ═════════ 10. “Shopping ideas” quick-pick popup ═════════ */
.ai-suggest-box{
  position:absolute;          /* anchored to .ai-input-bar */
  left:0; right:0;            /* span the whole chat column */
  width:100%; max-width:100%; /* no overflow */
  bottom:100%;              /* ↑ open **above** the bar (inside window) */
  margin-bottom:6px;
  top:auto;                 /* cancel the old setting */
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  padding:6px 0;
  z-index:50;
  font-size:14px; line-height:1.35;
}

/* When collapsed, drop the list UNDER the footer */
.ai-chat-window.ai-collapsed .ai-suggest-box{
  bottom:auto;         /* reset */
  top:100%;            /* place below input bar */
  margin-top:8px;      /* spacing below footer */
  margin-bottom:0;
  z-index:120;         /* above footer glow */
}
.ai-suggest-box h4{
  margin:0 12px 4px;
  font:600 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#666; text-transform:uppercase; letter-spacing:.02em;
}
.ai-suggest-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  cursor:pointer; user-select:none;
  font-size:16px; 
}
.ai-suggest-text{
  background:linear-gradient(135deg,#000 0%,#bc964e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;   /* “see-through” → shows gradient */
}
.ai-suggest-item:hover{background:#f6f6f6}

/* universal helper – anything with [hidden] stays invisible */
[hidden]{display:none!important;}

/* AI svg icon used in Shopping ideas */
.ai-suggest-ai{
  width:20px;height:20px;flex:none;display:block;
}
.ai-suggest-item .ai-suggest-ai{ pointer-events:none; } /* avoid accidental clicks */
@media(max-width:600px){
  .ai-suggest-box{
    font-size:15px;
    left:0; right:0;        /* keep 100 % width on phones */
  }
}
/* ─────────────────────────────────────────────────────────────────────
   COMPOSER ORDERING
   - First shape (collapsed): textarea always above on ALL devices
   - Second shape (after send): mobile-only textarea above
   ------------------------------------------------------------------- */

/* FIRST SHAPE: window is .ai-collapsed → textarea above icons (all breakpoints) */
.ai-chat-window.ai-collapsed .ai-input-bar{
  grid-template-rows:auto var(--row-h) !important;
}
.ai-chat-window.ai-collapsed .ai-input-bar.has-preview{
  grid-template-rows:auto auto var(--row-h) !important;
}
.ai-chat-window.ai-collapsed .ai-chat-input{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  /* placeholder starts where the camera starts (container padding only) */
  padding:8px 12px 6px 0 !important;       /* 0 left here; left inset comes from container */
  overflow-y:auto;
}
.ai-chat-window.ai-collapsed .ai-input-bar.has-preview .ai-chat-input{
  grid-row:2 !important;
}
.ai-chat-window.ai-collapsed .ai-preview{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
}
.ai-chat-window.ai-collapsed .ai-input-bar .ai-icon-btn{
  grid-row:2 !important;
}
.ai-chat-window.ai-collapsed .ai-input-bar.has-preview .ai-icon-btn{
  grid-row:3 !important;
}

/* SECOND SHAPE: AFTER SEND — mobile only (≤600px) keep textarea above */
@media (max-width:600px){
  .ai-chat-window:not(.ai-collapsed) .ai-input-bar{
    grid-template-rows:auto var(--row-h) !important;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-input-bar.has-preview{
    grid-template-rows:auto auto var(--row-h) !important;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-chat-input{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    /* more vertical padding on phones */
    padding:8px 12px 6px 0 !important;   /* no extra left; aligns with camera */
    overflow-y:auto;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-input-bar.has-preview .ai-chat-input{
    grid-row:2 !important;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-preview{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-input-bar .ai-icon-btn{
    grid-row:2 !important;
  }
  .ai-chat-window:not(.ai-collapsed) .ai-input-bar.has-preview .ai-icon-btn{
    grid-row:3 !important;
  }
}
/* Alignment + spacing (collapsed = first shape; mobile = second on send) */
.ai-chat-window.ai-collapsed .ai-input-bar{
  padding-left:var(--edge-pad) !important;   /* small left inset like camera */
  padding-right:0 !important;                /* send icon flush right */
  row-gap:10px !important;
  column-gap:16px !important;
  
}

  @media (max-width:600px){
   .ai-chat-window:not(.ai-collapsed) .ai-input-bar{
     padding-left:var(--edge-pad) !important;   /* keep small left inset */
     padding-right:0 !important;                /* send icon flush right */
     row-gap:10px !important;
     column-gap:16px !important;
     --col-gap:16px !important;
   }
  .ai-chat-window:not(.ai-collapsed) .ai-chat-input{
    /* keep the same as “SECOND SHAPE” above */
    padding:8px 12px 6px 0 !important;
  }
  }
/* ═════════ 11. Collapsed “first message” mode ═════════ */
/* When collapsed: hide header/body and let only the footer show as a pill */
.ai-chat-window.ai-collapsed{
  background:transparent !important;
  box-shadow:none !important;
  height:auto !important;
  border-radius:0 !important;
  overflow:visible !important;  /* footer/welcome can breathe */
}
.ai-chat-window.ai-collapsed .ai-chat-header,
.ai-chat-window.ai-collapsed .ai-chat-body{
  display:none !important;
}
.ai-chat-window.ai-collapsed .ai-chat-footer{
  --footer-radius:30px;                 /* pass radius to ribbon clip */
  border-radius:30px !important;        /* pill radius */
  overflow:visible !important;          /* let suggestions drop outside */
  /* Fallback static glow + animated drop-shadow pulse */
  box-shadow:0 0 12px 4px rgba(188,150,78,.35) !important;
  will-change: filter;
  -webkit-filter: drop-shadow(0 0 0 rgba(188,150,78,0));
  filter: drop-shadow(0 0 0 rgba(188,150,78,0));
  animation: aiPulseFilter 2.2s ease-in-out infinite !important;
}
/* Hide the ribbon when the full chat is open (optional) */
.ai-chat-window:not(.ai-collapsed) .ai-try-ribbon{ display:none; }
@keyframes aiPulseFilter{
  0%{
    -webkit-filter: drop-shadow(0 0 0 rgba(188,150,78,0));
    filter: drop-shadow(0 0 0 rgba(188,150,78,0));
  }
  50%{
    -webkit-filter: drop-shadow(0 0 18px rgba(188,150,78,.75));
    filter: drop-shadow(0 0 18px rgba(188,150,78,.75));
  }
  100%{
    -webkit-filter: drop-shadow(0 0 0 rgba(188,150,78,0));
    filter: drop-shadow(0 0 0 rgba(188,150,78,0));
  }
}
@media (prefers-reduced-motion: reduce){
    .ai-chat-window.ai-collapsed .ai-chat-footer{
    animation: none;
    -webkit-filter: drop-shadow(0 0 10px rgba(188,150,78,.45));
    filter: drop-shadow(0 0 10px rgba(188,150,78,.45));
  }
}
/* Welcome banner (icon on left + bold text on right) – only when collapsed */
.ai-welcome-banner{
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:0 0 10px 0;
  background:#fff;
  color:#000;
  border:1px solid #eee;
  border-radius:15px 15px 15px 0;  /* chat-bubble shape (BL = 0) */
  font-weight:700;  /* bold text */
}
.ai-welcome-banner img{
  width:32px;height:32px;flex:0 0 32px;  /* bigger icon before text */
}
.ai-chat-window.ai-collapsed .ai-welcome-banner{
  display:flex;
}

/* Small AI icon right after “Coveti Chat To Shop” in header */
.ai-title-icon{
  width:24px;height:24px;      /* bigger in header */
  margin-left:10px;
  vertical-align:-4px;
  display:inline-block;
}

/* Wrap for title + AI icon (keeps them side-by-side) */
.ai-header-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
}