/* MyShopSwift AI shopping assistant — styles.
   Uses the storefront's own palette, fonts and square-ish corners. All classes
   are prefixed msa- so nothing here can collide with the rest of the page. */

.msa-root{
  --msa-indigo:#0F2A6B;
  --msa-indigo-2:#0A1F52;
  --msa-paper:#F7F9FC;
  --msa-paper-2:#EBF0F8;
  --msa-orange:#FF6B00;
  --msa-rust:#C2410C;
  --msa-green:#2F6E4E;
  --msa-line:rgba(27,31,59,0.14);
  font-family:'Work Sans',sans-serif;
  color:var(--msa-indigo);
}
.msa-root *{box-sizing:border-box;}
.msa-root button{font-family:inherit;cursor:pointer;}
.msa-root[hidden]{display:none;}

/* ---- Launcher ---- */
.msa-launcher{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:10px;
  background:var(--msa-indigo);color:var(--msa-paper);
  border:none;border-bottom:3px solid var(--msa-orange);border-radius:2px;
  padding:12px 18px 11px;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 6px 20px rgba(15,42,107,.28);
  transition:background .15s, transform .15s;
}
.msa-launcher:hover{background:var(--msa-indigo-2);}
.msa-launcher:focus-visible,.msa-root button:focus-visible,.msa-root select:focus-visible,.msa-root textarea:focus-visible{
  outline:2px solid var(--msa-orange);outline-offset:2px;
}
.msa-launcher svg{width:20px;height:20px;flex-shrink:0;}
.msa-launcher[hidden]{display:none;}

/* ---- Panel ---- */
.msa-panel{
  position:fixed;right:20px;bottom:20px;z-index:85;
  width:392px;height:min(640px,calc(100vh - 40px));height:min(640px,calc(100dvh - 40px));
  display:none;flex-direction:column;
  background:var(--msa-paper);border:1px solid var(--msa-line);border-radius:2px;
  box-shadow:0 14px 44px rgba(15,42,107,.28);
  overflow:hidden;
}
.msa-panel.msa-open{display:flex;}

.msa-head{
  background:var(--msa-indigo);color:var(--msa-paper);
  display:flex;align-items:center;gap:8px;padding:12px 10px 12px 16px;flex-shrink:0;
}
.msa-head-title{flex:1;min-width:0;}
.msa-head h2{
  margin:0;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.01em;
}
.msa-head p{margin:2px 0 0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;opacity:.75;}
.msa-head-btn{
  background:none;border:1px solid rgba(247,249,252,.35);color:var(--msa-paper);
  border-radius:2px;height:32px;padding:0 10px;font-size:11.5px;font-family:'IBM Plex Mono',monospace;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.msa-head-btn:hover{border-color:var(--msa-paper);}
.msa-head-btn svg{width:15px;height:15px;}
.msa-head-icon{width:32px;padding:0;justify-content:center;border-color:transparent;}
.msa-head-icon svg{width:18px;height:18px;}
.msa-stripe{
  height:4px;flex-shrink:0;
  background:linear-gradient(90deg,#0F2A6B 0%,#0F2A6B 55%,#C2410C 78%,#FF6B00 100%);
}

/* ---- Messages ---- */
.msa-log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.msa-msg{max-width:90%;font-size:14px;line-height:1.5;padding:10px 13px;border-radius:2px;word-wrap:break-word;overflow-wrap:anywhere;}
.msa-msg p{margin:0;}
.msa-msg p + p,.msa-msg ul + p,.msa-msg p + ul{margin-top:8px;}
.msa-msg ul{margin:0;padding-left:18px;}
.msa-bot{align-self:flex-start;background:#fff;border:1px solid var(--msa-line);}
.msa-user{align-self:flex-end;background:var(--msa-indigo);color:var(--msa-paper);}
.msa-error{align-self:flex-start;background:#fff;border:1px solid var(--msa-line);border-left:3px solid var(--msa-rust);}
.msa-notice{align-self:flex-start;background:#fff;border:1px solid var(--msa-line);border-left:3px solid var(--msa-green);}
.msa-inline-btn{
  display:inline-block;margin-top:8px;background:none;border:none;padding:0;
  color:var(--msa-indigo);font-size:12.5px;font-weight:600;text-decoration:underline;
}
.msa-inline-btn:hover{color:var(--msa-rust);}

.msa-chips{display:flex;flex-wrap:wrap;gap:8px;}
.msa-chip{
  background:transparent;border:1.5px solid var(--msa-indigo);color:var(--msa-indigo);
  border-radius:2px;padding:7px 11px;font-size:12.5px;font-weight:600;transition:all .15s;
}
.msa-chip:hover{background:var(--msa-indigo);color:var(--msa-paper);}

.msa-typing{align-self:flex-start;display:flex;gap:5px;padding:13px 14px;background:#fff;border:1px solid var(--msa-line);border-radius:2px;}
.msa-typing span{width:6px;height:6px;border-radius:50%;background:var(--msa-indigo);opacity:.35;animation:msa-blink 1.2s infinite ease-in-out;}
.msa-typing span:nth-child(2){animation-delay:.15s;}
.msa-typing span:nth-child(3){animation-delay:.3s;}
@keyframes msa-blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* ---- Product cards ---- */
.msa-cards{display:flex;flex-direction:column;gap:8px;align-self:stretch;}
.msa-card{
  display:grid;grid-template-columns:72px 1fr;gap:12px;
  background:#fff;border:1px solid var(--msa-line);border-radius:2px;padding:10px;
}
.msa-thumb{
  width:72px;height:72px;background:var(--msa-paper-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.msa-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.msa-card-body{min-width:0;display:flex;flex-direction:column;gap:6px;}
.msa-card-name{
  margin:0;font-size:13.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.msa-card-meta{font-size:11px;color:#6b7390;font-family:'IBM Plex Mono',monospace;}
.msa-price{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:15px;}
.msa-price s{font-weight:400;font-size:12px;color:#888;margin-left:6px;}
.msa-select{
  width:100%;border:1.5px solid var(--msa-line);border-radius:2px;background:var(--msa-paper);
  padding:7px 8px;font-size:13px;color:var(--msa-indigo);font-family:inherit;
}
.msa-card-actions{display:flex;align-items:center;gap:8px;}
.msa-qty{display:flex;align-items:center;border:1.5px solid var(--msa-indigo);flex-shrink:0;}
.msa-qty button{
  width:30px;height:32px;background:none;border:none;font-size:16px;color:var(--msa-indigo);
  display:flex;align-items:center;justify-content:center;
}
.msa-qty button:hover{background:var(--msa-paper-2);}
.msa-qty-val{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;min-width:24px;text-align:center;}
.msa-add{
  flex:1;background:var(--msa-indigo);color:var(--msa-paper);border:1.5px solid transparent;border-radius:2px;
  height:35px;padding:0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .15s;
}
.msa-add:hover{background:var(--msa-rust);}
.msa-add.msa-done{background:var(--msa-green);}
.msa-card-note{font-size:12px;min-height:0;}
.msa-card-note.msa-bad{color:var(--msa-rust);}
.msa-card-note.msa-good{color:var(--msa-green);}

/* ---- Composer ---- */
.msa-composer{
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0;
  padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--msa-line);background:#fff;
}
.msa-input{
  flex:1;resize:none;border:1.5px solid var(--msa-line);border-radius:2px;background:var(--msa-paper);
  padding:9px 10px;font-size:14px;line-height:1.4;font-family:inherit;color:var(--msa-indigo);
  max-height:104px;min-height:40px;
}
.msa-input:focus{border-color:var(--msa-indigo);outline:none;}
.msa-send{
  width:42px;height:40px;background:var(--msa-orange);color:var(--msa-indigo);border:none;border-radius:2px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;
}
.msa-send:hover{background:#c98f22;}
.msa-send:disabled,.msa-input:disabled{opacity:.5;cursor:not-allowed;}
.msa-send svg{width:18px;height:18px;}

/* ---- Mobile: full-screen sheet ---- */
@media (max-width:640px){
  .msa-launcher{right:14px;bottom:14px;padding:11px 15px 10px;}
  .msa-launcher .msa-launcher-label{display:none;}
  .msa-panel{
    inset:0;width:100%;height:100vh;height:100dvh;border:none;border-radius:0;
  }
  .msa-head{padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .msa-input{font-size:16px;} /* stops iOS zooming into the field */
  .msa-msg{max-width:94%;}
  html.msa-locked{overflow:hidden;}
}

@media (prefers-reduced-motion:reduce){
  .msa-typing span{animation:none;opacity:.6;}
  .msa-launcher,.msa-add,.msa-chip{transition:none;}
}