/* V3 widget.css — old floating launcher + V1-style modal (Shadow-DOM scoped)
   - Vertical right-side launcher: "Shop with AI mode"
   - Modal header: logo on the left, and on the RIGHT a tight cluster:
     "AI Companion" + AI icon + Close (×)
   - Composer: V1 grid (compact ↔ expanded), preview, probe
   - Shopping ideas (portal) styles
*/

/* ===== Shadow host baseline ===== */
:host{
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#000;
  display:block;
}
:host, *{ box-sizing:border-box; }

/* ===== Overlay (shown when modal is open) ===== */
.msac-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:2147483646; display:block;
}
.msac-overlay[hidden]{ display:none; }

/* ===== 1) Old V3 floating launcher (vertical bar) ===== */
.ai-chat-toggle{
  position:fixed; top:50%; right:0; transform:translateY(-50%);
  writing-mode:vertical-rl;
  padding:12px 6px; background:#000; color:#fff;
  font:600 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  border-radius:8px 0 0 8px; cursor:pointer; user-select:none;
  z-index:2147483647;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.ai-chat-toggle::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; animation:pulse 2.4s infinite;
}
@media(max-width:520px){
  .ai-chat-toggle{ top:50%; right:0; transform:translateY(-50%); border-radius:8px 0 0 8px; }
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.35)}
  70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}

/* ===== 2) Modal window ===== */
.ai-chat-window{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:860px; max-width:94vw; height:80vh;
  display:none; flex-direction:column;
  background:#000; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.55); z-index:2147483647;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media(max-width:768px){
  .ai-chat-window{ top:0; left:0; transform:none; width:100%; height:100%; border-radius:0; }
}

/* ===== 3) Header (logo left; RIGHT cluster = title+AI icon+X) ===== */
.ai-chat-header{
  background:#000; color:#fff; padding:14px 16px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #333; user-select:none;
}
.ai-chat-header .ai-logo{
  height:42px; width:auto; margin-right:8px; flex-shrink:0;
}

/* "AI Companion" + AI icon */
.ai-header-title{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.ai-title-icon{
  width:22px; height:22px; display:inline-block;
  margin-left:4px; vertical-align:-3px;
}

/* Title + X live together tightly on the RIGHT */
.ai-header-title-row{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
}

/* Compact close button (snug to AI icon) */
.ai-chat-close{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; cursor:pointer;
  font-weight:700; font-size:22px; line-height:1;
  border-radius:4px;
  transform:translateY(-1px); /* micro optical centering */
}
.ai-chat-close:hover{ background:rgba(255,255,255,.12); }
.ai-chat-close:focus-visible{
  outline:2px solid rgba(255,255,255,.35); outline-offset:2px; border-radius:6px;
}

/* ===== 4) 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;
  display:grid; gap:18px; justify-items:center;
  grid-template-columns:repeat(1,minmax(0,1fr)); grid-auto-rows:min-content;
  scroll-behavior:smooth; overscroll-behavior:contain; scrollbar-gutter:stable;
}
@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); } }

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

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

/* ===== 6) 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; }
.ai-sec-title{
  grid-column:1/-1; width:100%;
  font-weight:600; font-size:15px; margin:4px 0; text-align:left;
}

/* ===== 7) Footer + V1-like composer (compact ↔ expanded) ===== */
.ai-chat-footer{
  padding:10px; border-top:1px solid #eee; background:#fff;
}

/* Composer grid */
.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;
  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); }

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

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

/* Image 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-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-close img{ display:block; width:16px; height:16px; }
.ai-input-bar.has-preview .ai-preview{ display:block; }

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

/* Single-line width probe */
.ai-probe{ position:absolute; left:-9999px; top:auto; height:0; visibility:hidden; white-space:pre; }
.ai-probe > span{ display:inline-block; }

/* ===== 8) Formatted reply utilities ===== */
.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; }
.ai-sub{ margin:4px 0 4px 1.25rem; padding:0; list-style:circle; }
.ai-sub li{ margin:2px 0; display:list-item; }

/* ===== 9) “Shopping ideas” quick-pick popup (portal) ===== */
.ai-suggest-box{
  position:absolute;       /* default; JS upgrades to fixed when open */
  left:0; right:0; width:100%; max-width:100%;
  top:auto; bottom:auto;
  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:2147483647;
  font-size:14px; line-height:1.35;
  max-height:min(45vh, 320px);
  overflow:auto;
}
.ai-suggest-portal{ /* minimal host appended to <body> */ }
.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-item:hover{ background:#f6f6f6; }
.ai-suggest-ai{ width:20px; height:20px; flex:none; display:block; }
.ai-suggest-text{
  background:linear-gradient(135deg,#000 0%,#bc964e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== Utility ===== */
[hidden]{ display:none !important; }