/* 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 host baseline (inside Shadow DOM only) */
:host{
  font: 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: inherit;
}
: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:860px;max-width:100%;height:70vh;display:flex;flex-direction:column;
  background:#000;border-radius:12px;overflow:visible;   /* let dropdown escape */
  box-shadow:0 12px 40px rgba(0,0,0,.55);z-index:2147483600; /* above badges/overlays */
  margin:0 auto;                                         /* centred block */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif
}
/* ─── Chat window when the product column is hidden ──────────────── */
.ai-chat-window.narrow{
  width:430px;               /* roughly half of 860 px */
  max-width:100%;            /* never overflow viewport */
  height:70vh;               /* ⬅ shorter when products are hidden */
}
@media(max-width:768px){     /* phones / small tablets */
  .ai-chat-window.narrow{
    width:100%;              /* take full width on mobile */
    height:50vh;             /* a touch taller on mobile */
  }
}
/* احذف الـ 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 */
}
/* Small AI icon after the title */
.ai-title-icon{
  width:24px;height:24px;
  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;
}
/* ═════════ 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}

.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{
  max-width:77%;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  */
  padding:10px;
  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;
}

 .ai-input-bar{
  --row-h:50px;
  --edge-pad: 8px;
  --col-gap: 12px;
  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;
  /* allow the “Shopping ideas” dropdown to escape above the bar */
  overflow:visible;
  padding-inline:var(--edge-pad);
}
@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;
  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}
.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; justify-self:end; margin-inline-end:0 !important; }

/* ═════════ 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
}
.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;
  overflow-x:hidden; overflow-y:hidden;
  background:transparent; border:none; padding:0 6px 0 0; outline:none;
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#000; max-height:200px; min-height:1em;
}
.ai-input-bar.expanded .ai-chat-input{
  grid-column:1 / -1; grid-row:1;
  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; }
/* probe (measures one-line width to decide compact vs expanded) */
.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;        /* default; JS upgrades to position:fixed when open */
  left:0; right:0;          /* span full width of composer */
  width:100%; max-width:100%;
  top:auto; bottom:auto;    /* neutral; JS sets exact viewport coords */
  margin-top:0;
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  padding:6px 0;
  z-index:2000;             /* dialog puts it in top layer; value irrelevant there */
  font-size:14px; line-height:1.35;
  max-height:min(45vh, 320px);  /* never cut; scroll if needed */
  overflow:auto;
}


/* Optional: a neutral container we append to <body> */
.ai-suggest-portal{ /* intentionally minimal to avoid intercepting events */ }
.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-suggest-ai{ width:20px;height:20px;flex:none;display:block; }
@media(max-width:600px){
  .ai-suggest-box{font-size:15px}
}