/* 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;
}

/* ═════════ Header actions ═════════ */
.ai-header-actions{ margin-left:auto; display:flex; gap:8px; }
.ai-hdr-btn{
  all:unset; cursor:pointer; color:#fff; background:#111; border:1px solid #333;
  padding:6px 10px; border-radius:8px; font-weight:600; font-size:13px;
}
.ai-hdr-btn:hover{ background:#1a1a1a }

/* ═════════ Drawer (sessions) ═════════ */
.ai-drawer{
  position:absolute; top:0; right:0; height:100%; width:320px; background:#fff; color:#000;
  border-left:1px solid #eee; box-shadow:-8px 0 24px rgba(0,0,0,.25); display:flex; flex-direction:column; z-index:2147483646;
}
.ai-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid #eee; font-weight:700; }
.ai-drawer-close{ all:unset; cursor:pointer; font-size:20px; line-height:1; padding:4px 6px; }
.ai-drawer-body{ flex:1; overflow:auto; padding:8px 10px; }
.ai-drawer-foot{ padding:10px; border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:8px; }
.ai-s-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border:1px solid #eee; border-radius:8px; margin-bottom:8px; }
.ai-s-main{ cursor:pointer; min-width:0; }
.ai-s-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-s-title.current{ color:#bc964e; }
.ai-s-time{ color:#666; font-size:12px; }
.ai-s-acts{ display:flex; gap:8px; }
.ai-link{ all:unset; color:#0a58ca; cursor:pointer; font-size:13px; }
.ai-link:hover{ text-decoration:underline }

/* ═════════ Sheet (passport) ═════════ */
.ai-sheet{
  position:absolute; top:0; right:0; height:100%; width:380px; background:#fff; color:#000;
  border-left:1px solid #eee; box-shadow:-8px 0 24px rgba(0,0,0,.25); display:flex; flex-direction:column; z-index:2147483646;
}
.ai-sheet-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #eee; font-weight:700; }
.ai-sheet-body{ flex:1; overflow:auto; padding:12px 14px; display:grid; gap:10px; }
.ai-sheet-foot{ padding:10px 14px; border-top:1px solid #eee; display:flex; gap:8px; justify-content:flex-end; }
.ai-pass-row{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:10px; }
.ai-input{ width:100%; border:1px solid #d9d9d9; border-radius:8px; padding:8px 10px; font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ai-textarea{ width:100%; border:1px solid #d9d9d9; border-radius:8px; padding:8px 10px; font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; resize:vertical; }
.ai-switch{ display:flex; align-items:center; gap:8px; font-weight:600; }
.ai-btn{
  all:unset; cursor:pointer; background:#000; color:#fff; border-radius:8px; padding:8px 12px; font-weight:700;
}
.ai-btn:hover{ opacity:.85 }
.ai-hint{ color:#666; font-size:12px; margin-top:6px; }

/* ═════════ Modal (auth) ═════════ */
.ai-modal{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); z-index:2147483647;
}
.ai-wizard{                             /* NEW: Daydream wizard overlay */
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index:2147483647;
}
.ai-wiz-card{
  width:min(680px, 92vw);
  background:#fff; color:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.ai-wiz-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,#000 0%,#bc964e 100%);
  color:#fff;
}
.ai-wiz-title{ font-weight:800; letter-spacing:.02em }
.ai-wiz-x{ all:unset; cursor:pointer; font-size:20px; line-height:1; padding:4px 6px; }
.ai-wiz-progress{ height:4px; background:#eee }
.ai-wiz-bar{ height:100%; background:#bc964e; transition:width .25s ease }
.ai-wiz-body{ padding:16px; display:grid; gap:10px }
.ai-wiz-foot{ padding:12px 16px; display:flex; gap:10px; border-top:1px solid #eee; background:#fafafa }
.ai-wiz-spacer{ flex:1 }
.ai-wiz-h3{ margin:0; font:600 18px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
.ai-wiz-hint{ color:#666; font-size:13px }
.ai-wiz-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .ai-wiz-grid{ grid-template-columns:1fr } }
.ai-wiz-btn{
  all:unset; cursor:pointer; background:#000; color:#fff; border-radius:10px;
  padding:10px 14px; font-weight:800; letter-spacing:.01em; min-width:120px; text-align:center;
}
.ai-wiz-btn:hover{ opacity:.9 }
.ai-wiz-btn.ghost{ background:#fff; color:#000; border:1px solid #ddd }
.ai-chip{
  all:unset; cursor:pointer; padding:10px 14px; border:1px solid #ddd; border-radius:999px;
  font-weight:700; background:#fff; color:#000; display:inline-flex; margin:6px; user-select:none;
  transition:transform .06s ease;
}
.ai-chip:active{ transform:scale(.98) }
.ai-chip.on{
  background:linear-gradient(135deg,#000 0%,#bc964e 100%); color:#fff; border-color:#000;
}
.ai-wiz-chips{ display:flex; flex-wrap:wrap; margin:2px -6px }
.ai-wiz-review{
  background:#0f0f0f; color:#e8e8e8; border-radius:10px; padding:12px; font-size:12px; overflow:auto;
}
.ai-wiz-btn.shk{ animation:wizShake .35s ease }
@keyframes wizShake{
  10%{ transform:translateX(-2px) } 30%{ transform:translateX(2px) }
  50%{ transform:translateX(-2px) } 70%{ transform:translateX(2px) } 100%{ transform:none }
}
.ai-modal-card{
  width:360px; background:#fff; color:#000; border-radius:12px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.ai-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eee; font-weight:700; }
.ai-modal-close{ all:unset; cursor:pointer; font-size:20px; padding:4px 6px; }
.ai-modal-body{ padding:12px 14px; display:grid; gap:8px; }
.ai-modal-foot{ padding:10px 14px; border-top:1px solid #eee; display:flex; gap:8px; justify-content:flex-end; }
/* ═════════ Wizard (first-login) ═════════ */
.ai-wizard{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index:2147483647;
}
.ai-wiz-card{
  width:min(680px, 92vw);
  background:#fff; color:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.ai-wiz-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,#000 0%,#bc964e 100%);
  color:#fff;
}
.ai-wiz-title{ font-weight:800; letter-spacing:.02em }
.ai-wiz-x{ all:unset; cursor:pointer; font-size:20px; line-height:1; padding:4px 6px; }
.ai-wiz-progress{ height:4px; background:#eee }
.ai-wiz-bar{ height:100%; background:#bc964e; transition:width .25s ease }
.ai-wiz-body{ padding:16px; display:grid; gap:10px }
.ai-wiz-foot{ padding:12px 16px; display:flex; gap:10px; border-top:1px solid #eee; background:#fafafa }
.ai-wiz-spacer{ flex:1 }
.ai-wiz-h3{ margin:0; font:600 18px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
.ai-wiz-hint{ color:#666; font-size:13px }
.ai-wiz-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .ai-wiz-grid{ grid-template-columns:1fr } }
.ai-wiz-btn{
  all:unset; cursor:pointer; background:#000; color:#fff; border-radius:10px;
  padding:10px 14px; font-weight:800; letter-spacing:.01em; min-width:120px; text-align:center;
}
.ai-wiz-btn:hover{ opacity:.9 }
.ai-wiz-btn.ghost{ background:#fff; color:#000; border:1px solid #ddd }
.ai-chip{
  all:unset; cursor:pointer; padding:10px 14px; border:1px solid #ddd; border-radius:999px;
  font-weight:700; background:#fff; color:#000; display:inline-flex; margin:6px; user-select:none;
  transition:transform .06s ease;
}
.ai-chip:active{ transform:scale(.98) }
.ai-chip.on{ background:linear-gradient(135deg,#000 0%,#bc964e 100%); color:#fff; border-color:#000; }
.ai-wiz-chips{ display:flex; flex-wrap:wrap; margin:2px -6px }
.ai-wiz-review{ background:#0f0f0f; color:#e8e8e8; border-radius:10px; padding:12px; font-size:12px; overflow:auto; }
.ai-wiz-btn.shk{ animation:wizShake .35s ease }
@keyframes wizShake{
  10%{ transform:translateX(-2px) } 30%{ transform:translateX(2px) }
  50%{ transform:translateX(-2px) } 70%{ transform:translateX(2px) } 100%{ transform:none }
}
/* ═════════ 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}
}