/* =====================================================
   Woo Rotation Search — Frontend Widget
   ===================================================== */

#wrs-widget {
  position: fixed;
  bottom: 20px;
  z-index: 999999;
  direction: rtl;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Vazirmatn", "IRANSans", Tahoma, sans-serif;
}
#wrs-widget.wrs-right { right: 20px; }
#wrs-widget.wrs-left  { left:  20px; }

/* ---- Toggle button ---- */
#wrs-toggle {
  border-radius: 50%;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 0;
  flex-shrink: 0;
}
#wrs-toggle:hover  { transform: scale(1.07); box-shadow: 0 6px 24px rgba(0,0,0,.28); }
#wrs-toggle:active { transform: scale(.96); }

.wrs-icon-open  { display:flex; align-items:center; justify-content:center; }
.wrs-icon-close { display:flex; align-items:center; justify-content:center; }

/* ---- Panel ---- */
#wrs-panel {
  position: fixed;         /* fixed so it stays put on mobile scroll */
  bottom: 90px;
  width: 360px;
  max-width: calc(100vw - 24px);
  height: 500px;
  max-height: calc(100svh - 110px); /* svh: safe on mobile browsers */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 46px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wrs-pop .18s cubic-bezier(.34,1.56,.64,1);
}
#wrs-widget.wrs-right #wrs-panel { right: 20px; }
#wrs-widget.wrs-left  #wrs-panel { left:  20px; }

#wrs-panel.wrs-hidden { display: none !important; }

@keyframes wrs-pop {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ---- Header ---- */
.wrs-header {
  background: var(--wrs-header, #1a1a1a);
  color: #fff;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.wrs-close-x {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 4px;
  display: flex; align-items: center;
  opacity: .8; border-radius: 4px;
}
.wrs-close-x:hover { opacity:1; }

/* ---- Messages ---- */
#wrs-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f5f5f7;
}

.wrs-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.75;
  word-wrap: break-word;
}
.wrs-bubble.wrs-bot  {
  background: #fff;
  border: 1px solid #e5e5ea;
  align-self: flex-start;
  border-bottom-right-radius: 4px;
}
.wrs-bubble.wrs-user {
  background: var(--wrs-header, #1a1a1a);
  color: #fff;
  align-self: flex-end;
  border-bottom-left-radius: 4px;
}

/* ---- Product cards ---- */
.wrs-cards-wrap {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.wrs-cards-intro {
  font-size: 12.5px; color: #666; margin-bottom: 2px;
}
.wrs-product-card {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: box-shadow .15s;
}
.wrs-product-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }

.wrs-product-thumb {
  width: 80px; min-width: 80px;
  background: #f0f0f2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wrs-product-thumb img {
  width: 100%; height: 80px;
  object-fit: cover; display: block;
}
.wrs-product-info {
  flex: 1; padding: 9px 11px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 4px;
}
.wrs-product-name {
  font-size: 13px; font-weight: 700;
  color: #1a1a1a; line-height: 1.4;
  text-decoration: none;
}
.wrs-product-name:hover { text-decoration: underline; }
.wrs-product-price { font-size: 12.5px; color: #444; }
.wrs-product-price ins { text-decoration: none; }
.wrs-product-price del { opacity: .6; font-size: 11px; margin-left: 3px; }
.wrs-sale-badge {
  display: inline-block;
  background: #e53e3e; color: #fff;
  font-size: 10px; padding: 1px 5px;
  border-radius: 4px; margin-right: 4px;
  vertical-align: middle;
}
.wrs-product-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.wrs-btn-view {
  font-size: 11.5px; padding: 4px 9px;
  border-radius: 6px; text-decoration: none;
  background: #f0f0f2; color: #333; border: none; cursor: pointer;
  transition: background .15s;
}
.wrs-btn-view:hover { background: #e0e0e3; color: #000; }
.wrs-btn-cart {
  font-size: 11.5px; padding: 4px 9px;
  border-radius: 6px; text-decoration: none;
  background: var(--wrs-btn, #1a1a1a); color: #fff !important;
  border: none; cursor: pointer; transition: opacity .15s;
}
.wrs-btn-cart:hover { opacity: .85; }
.wrs-out-of-stock { font-size: 11px; color: #999; }

/* ---- Typing indicator ---- */
.wrs-typing {
  display: inline-flex; gap: 4px; align-items: center; padding: 3px 0;
}
.wrs-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #aaa;
  animation: wrs-bounce 1.1s infinite ease-in-out;
}
.wrs-typing span:nth-child(2) { animation-delay: .15s; }
.wrs-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wrs-bounce {
  0%,80%,100% { transform:translateY(0);   opacity:.4; }
  40%          { transform:translateY(-5px); opacity:1; }
}

/* ---- Input row ---- */
#wrs-form-wrap {
  display: flex; align-items: center;
  border-top: 1px solid #eee;
  padding: 8px 10px; gap: 6px;
  background: #fff; flex-shrink: 0;
}
#wrs-input {
  flex: 1; border: none; outline: none;
  padding: 10px 12px; font-size: 14px;
  border-radius: 10px; background: #f1f1f4;
  font-family: inherit;
}
#wrs-send {
  border: none;
  background: var(--wrs-btn, #1a1a1a); color: #fff;
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: opacity .15s;
}
#wrs-send:disabled { opacity: .45; cursor: default; }

/* =====================================================
   MOBILE — full-width panel, smaller toggle
   ===================================================== */
@media (max-width: 480px) {
  #wrs-widget.wrs-right,
  #wrs-widget.wrs-left {
    right: 0; left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* toggle stays right by default */
  }
  #wrs-widget.wrs-left {
    align-items: flex-start;
  }

  #wrs-toggle {
    /* smaller & safe from device corners */
    width: 50px !important;
    height: 50px !important;
    margin: 0 12px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }
  /* Rescale inner SVG/img to fit smaller button */
  #wrs-toggle .wrs-icon-open svg,
  #wrs-toggle .wrs-icon-open img {
    width: 22px !important; height: 22px !important;
  }

  #wrs-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    height: 70svh;
    max-height: 70svh;
    box-shadow: 0 -6px 32px rgba(0,0,0,.16);
  }
  /* on mobile panel doesn't need left/right override */
  #wrs-widget.wrs-right #wrs-panel,
  #wrs-widget.wrs-left  #wrs-panel {
    right: 0; left: 0;
  }
}