/* =========================================================
   Tezkar AI Sales Agent — Frontend UI  v1.2.0
   Brand: deep teal #044C5C  ·  rose #D41C5C
   Rebuilt to match tezkar.ae UI/UX. No native scrollbars,
   compact header, clean circular launcher, polished chat.
   ========================================================= */

#tasa-widget, #tasa-widget *, #tasa-widget *::before, #tasa-widget *::after { box-sizing: border-box; }

#tasa-widget {
  --tasa-primary: #044C5C;
  --tasa-deep:    #022e38;
  --tasa-accent:  #D41C5C;
  --tasa-ink:     #0c1f29;
  --tasa-soft:    #5b6e76;
  --tasa-line:    #e7edef;
  --tasa-mist:    #f4f7f8;
  --tasa-card:    #ffffff;
  --tasa-radius:  20px;
  --tasa-shadow:  0 24px 70px rgba(2, 30, 40, .22);
  --tasa-ring:    0 0 0 4px rgba(4, 76, 92, .12);

  position: fixed;
  z-index: 2147483000;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tasa-ink);
  font-size: 14px;
  line-height: 1.55;
}
#tasa-widget.tasa-pos-right { right: 24px; bottom: 24px; }
#tasa-widget.tasa-pos-left  { left: 24px;  bottom: 24px; }

/* ---------- Launcher (FAB) ---------- */
.tasa-launcher {
  appearance: none; border: 0; padding: 0; margin: 0;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(145deg, var(--tasa-primary) 0%, var(--tasa-deep) 100%);
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(2, 30, 40, .32);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.tasa-launcher:hover  { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 44px rgba(2,30,40,.4); }
.tasa-launcher:active { transform: translateY(-1px) scale(.99); }
.tasa-launcher:focus-visible { outline: none; box-shadow: 0 14px 30px rgba(2,30,40,.32), 0 0 0 4px rgba(212,28,92,.45); }

.tasa-launcher-icon { display: flex; align-items: center; justify-content: center; }
.tasa-launcher-icon svg { width: 27px; height: 27px; display: block; }
.tasa-launcher-icon img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; }

/* online dot */
.tasa-launcher-dot {
  position: absolute; right: 4px; bottom: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 3px solid #fff;
}
/* attention pulse */
.tasa-launcher-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(4,76,92,.45);
  animation: tasaPulse 2.6s ease-out infinite; pointer-events: none;
}
@keyframes tasaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(4,76,92,.4); }
  70%  { box-shadow: 0 0 0 16px rgba(4,76,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(4,76,92,0); }
}

/* hover tooltip pill */
.tasa-launcher-tip {
  position: absolute; bottom: 50%; transform: translateY(50%) scale(.9);
  white-space: nowrap; pointer-events: none; opacity: 0;
  background: #fff; color: var(--tasa-ink);
  border: 1px solid var(--tasa-line); border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 28px rgba(15,23,42,.16);
  transition: opacity .18s ease, transform .18s ease;
}
.tasa-pos-right .tasa-launcher-tip { right: 72px; transform-origin: right center; }
.tasa-pos-left  .tasa-launcher-tip { left: 72px;  transform-origin: left center; }
.tasa-launcher:hover + .tasa-launcher-tip { opacity: 1; transform: translateY(50%) scale(1); }

/* hide launcher when panel open */
#tasa-widget.tasa-open .tasa-launcher,
#tasa-widget.tasa-open .tasa-launcher-tip { opacity: 0; pointer-events: none; transform: scale(.6); }
.tasa-launcher, .tasa-launcher-tip { transition: transform .22s ease, opacity .2s ease, box-shadow .22s ease; }

/* ---------- Panel ---------- */
.tasa-panel {
  position: absolute; bottom: 0; width: 384px;
  max-width: calc(100vw - 32px);
  height: min(640px, calc(100vh - 48px));
  background: var(--tasa-card);
  border-radius: var(--tasa-radius);
  box-shadow: var(--tasa-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(.97);
  transform-origin: bottom right; pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.3,.5,1);
}
.tasa-pos-left .tasa-panel { transform-origin: bottom left; }
.tasa-pos-right .tasa-panel { right: 0; }
.tasa-pos-left  .tasa-panel { left: 0; }
#tasa-widget.tasa-open .tasa-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ---------- Header (compact) ---------- */
.tasa-head {
  position: relative; flex: 0 0 auto;
  padding: 16px 16px 15px;
  background:
    radial-gradient(120% 120% at 92% 0%, rgba(212,28,92,.42) 0%, rgba(212,28,92,0) 42%),
    linear-gradient(135deg, var(--tasa-primary) 0%, var(--tasa-deep) 100%);
  color: #fff; display: flex; align-items: center; gap: 12px;
}
.tasa-avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18); overflow: hidden;
}
.tasa-avatar img { width: 34px; height: 34px; object-fit: contain; }
.tasa-head-meta { min-width: 0; flex: 1; }
.tasa-head-meta strong {
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: .1px;
}
.tasa-verified { display: inline-flex; width: 15px; height: 15px; }
.tasa-verified svg { width: 15px; height: 15px; }
.tasa-status {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12px; color: rgba(255,255,255,.82); font-weight: 500;
}
.tasa-online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: tasaBlink 2.4s infinite;
}
@keyframes tasaBlink { 0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55);} 60%{box-shadow:0 0 0 6px rgba(52,211,153,0);} }

.tasa-close {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .16s ease;
}
.tasa-close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }
.tasa-close svg { width: 15px; height: 15px; }

/* ---------- Quick action chips ---------- */
.tasa-quick {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 14px;
  overflow-x: auto; background: #fff; border-bottom: 1px solid var(--tasa-line);
  scrollbar-width: none;
}
.tasa-quick::-webkit-scrollbar { display: none; }
.tasa-quick button {
  white-space: nowrap; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--tasa-line); background: var(--tasa-mist);
  color: var(--tasa-primary); font-weight: 600; font-size: 13px;
  border-radius: 999px; padding: 8px 14px;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.tasa-quick button:hover { border-color: var(--tasa-primary); background: #fff; transform: translateY(-1px); }

/* ---------- Messages ---------- */
.tasa-messages {
  flex: 1 1 auto; min-height: 0; padding: 16px 14px 8px;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, var(--tasa-mist) 0%, #ffffff 70%);
  scroll-behavior: smooth;
}
.tasa-messages::-webkit-scrollbar { width: 7px; }
.tasa-messages::-webkit-scrollbar-track { background: transparent; }
.tasa-messages::-webkit-scrollbar-thumb { background: rgba(4,76,92,.18); border-radius: 99px; }
.tasa-messages::-webkit-scrollbar-thumb:hover { background: rgba(4,76,92,.32); }
.tasa-messages { scrollbar-width: thin; scrollbar-color: rgba(4,76,92,.22) transparent; }

.tasa-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; animation: tasaFade .28s ease both; }
.tasa-row.user { justify-content: flex-end; }
@keyframes tasaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.tasa-mini-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(140deg, var(--tasa-primary), var(--tasa-deep));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 3px 8px rgba(2,30,40,.2);
}
.tasa-mini-avatar img { width: 20px; height: 20px; object-fit: contain; background:#fff; border-radius:5px; padding:2px; }

.tasa-bubble {
  max-width: 80%; padding: 11px 14px; font-size: 14px; line-height: 1.55;
  border-radius: 16px; word-break: break-word;
}
.tasa-row.bot .tasa-bubble {
  background: #fff; border: 1px solid var(--tasa-line); color: var(--tasa-ink);
  border-bottom-left-radius: 5px; box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.tasa-row.user .tasa-bubble {
  background: linear-gradient(140deg, var(--tasa-primary), var(--tasa-deep));
  color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 16px rgba(4,76,92,.26);
}
.tasa-bubble a { color: var(--tasa-accent); font-weight: 600; }
.tasa-row.user .tasa-bubble a { color: #fff; text-decoration: underline; }

/* typing dots */
.tasa-typing { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; animation: tasaFade .2s ease both; }
.tasa-typing .tasa-bubble { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.tasa-dot { width: 7px; height: 7px; border-radius: 50%; background: #9fb3b9; animation: tasaBounce 1.3s infinite ease-in-out; }
.tasa-dot:nth-child(2) { animation-delay: .18s; } .tasa-dot:nth-child(3) { animation-delay: .36s; }
@keyframes tasaBounce { 0%,80%,100%{transform:translateY(0);opacity:.5;} 40%{transform:translateY(-5px);opacity:1;} }

/* product cards inline */
.tasa-products { display: grid; gap: 9px; margin: 2px 0 12px 36px; }
.tasa-product {
  display: grid; grid-template-columns: 56px 1fr; gap: 11px; padding: 10px;
  border: 1px solid var(--tasa-line); border-radius: 14px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.tasa-product:hover { border-color: var(--tasa-primary); box-shadow: 0 8px 20px rgba(4,76,92,.1); transform: translateY(-1px); }
.tasa-product img { width: 56px; height: 56px; object-fit: cover; border-radius: 11px; background: var(--tasa-mist); }
.tasa-product-info { min-width: 0; }
.tasa-product-info strong { display: block; font-size: 13.5px; color: var(--tasa-ink); line-height: 1.3; }
.tasa-chip {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--tasa-mist); color: var(--tasa-soft);
}
.tasa-chip.instock { background: #e7f7ee; color: #15803d; }
.tasa-chip.out { background: #fdeaef; color: #be123c; }
.tasa-product-info a { display: inline-block; margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var(--tasa-accent); text-decoration: none; }
.tasa-product-info a:hover { text-decoration: underline; }

/* whatsapp handoff */
.tasa-wa {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px 36px;
  background: #25d366; color: #fff !important; text-decoration: none;
  padding: 9px 14px; border-radius: 12px; font-weight: 700; font-size: 13px;
  box-shadow: 0 8px 18px rgba(37,211,102,.3); transition: transform .14s ease, box-shadow .14s ease; animation: tasaFade .28s ease both;
}
.tasa-wa:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37,211,102,.4); }
.tasa-wa svg { width: 17px; height: 17px; }

/* ---------- Quote form ---------- */
.tasa-quote { flex: 0 0 auto; display: none; padding: 14px; background: var(--tasa-mist); border-top: 1px solid var(--tasa-line); max-height: 320px; overflow-y: auto; }
.tasa-quote.show { display: block; animation: tasaFade .2s ease both; }
.tasa-quote h4 { margin: 0 0 2px; font-size: 14px; color: var(--tasa-ink); }
.tasa-quote p.tasa-quote-sub { margin: 0 0 11px; font-size: 12px; color: var(--tasa-soft); }
.tasa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tasa-quote input, .tasa-quote textarea {
  width: 100%; border: 1px solid var(--tasa-line); border-radius: 11px;
  padding: 10px 12px; font: inherit; font-size: 13px; background: #fff; color: var(--tasa-ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tasa-quote textarea { grid-column: 1 / -1; margin-top: 8px; min-height: 74px; resize: vertical; }
.tasa-quote input:focus, .tasa-quote textarea:focus { border-color: var(--tasa-primary); box-shadow: var(--tasa-ring); }
.tasa-consent { display: flex; gap: 8px; align-items: flex-start; margin: 11px 0; font-size: 11.5px; color: var(--tasa-soft); line-height: 1.4; }
.tasa-consent input { margin-top: 2px; accent-color: var(--tasa-primary); }
.tasa-quote-submit {
  width: 100%; border: 0; cursor: pointer; font-weight: 700; font-size: 14px;
  padding: 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(140deg, var(--tasa-primary), var(--tasa-deep));
  transition: transform .14s ease, box-shadow .14s ease;
}
.tasa-quote-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(4,76,92,.3); }
.tasa-quote-submit:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- Footer / input ---------- */
.tasa-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff; border-top: 1px solid var(--tasa-line);
}
.tasa-quote-toggle {
  flex: 0 0 auto; width: 40px; height: 44px; border: 1px solid var(--tasa-line);
  background: var(--tasa-mist); color: var(--tasa-primary); border-radius: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.tasa-quote-toggle:hover { background: #fff; border-color: var(--tasa-primary); }
.tasa-quote-toggle svg { width: 19px; height: 19px; }
.tasa-input-wrap {
  flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  background: var(--tasa-mist); border: 1px solid var(--tasa-line); border-radius: 12px;
  padding: 0 4px 0 12px; height: 44px; transition: border-color .15s ease, box-shadow .15s ease;
}
.tasa-input-wrap:focus-within { border-color: var(--tasa-primary); box-shadow: var(--tasa-ring); background: #fff; }
.tasa-input {
  flex: 1 1 auto; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14px; color: var(--tasa-ink); height: 100%;
  min-width: 0; padding: 0;
}
.tasa-input::placeholder { color: #93a4ab; }
.tasa-send {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; cursor: pointer; border-radius: 10px;
  background: linear-gradient(140deg, var(--tasa-accent), #a51247); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.tasa-send:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(212,28,92,.4); }
.tasa-send:active { transform: scale(.94); }
.tasa-send svg { width: 17px; height: 17px; }

.tasa-credit { flex: 0 0 auto; text-align: center; font-size: 10.5px; color: #9fb0b6; padding: 0 0 9px; background: #fff; letter-spacing: .2px; }
.tasa-credit b { color: var(--tasa-primary); font-weight: 700; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  #tasa-widget.tasa-pos-right, #tasa-widget.tasa-pos-left { right: 16px; left: 16px; bottom: 16px; }
  .tasa-pos-right .tasa-launcher, .tasa-pos-left .tasa-launcher { margin-left: auto; }
  .tasa-panel {
    width: auto; left: 0; right: 0;
    height: min(86vh, calc(100vh - 24px));
    border-radius: 22px;
  }
  .tasa-launcher-tip { display: none; }
  .tasa-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #tasa-widget *, #tasa-widget *::before, #tasa-widget *::after { animation: none !important; transition: opacity .15s ease !important; }
}

/* =========================================================
   v1.2.1 — Theme-proofing layer (WoodMart / Elementor reset)
   High-specificity (#tasa-widget) + !important on layout-
   critical props so themes can't square off our icon buttons
   or collapse the inline SVG icons.
   ========================================================= */
#tasa-widget button {
  -webkit-appearance: none !important; appearance: none !important;
  margin: 0 !important; min-width: 0 !important; min-height: 0 !important;
  text-transform: none !important; letter-spacing: normal !important;
  line-height: normal !important; text-shadow: none !important; outline: none;
}
#tasa-widget svg { vertical-align: middle; flex: 0 0 auto; }

#tasa-widget .tasa-launcher {
  width: 60px !important; height: 60px !important; border-radius: 50% !important;
  padding: 0 !important; box-shadow: 0 14px 30px rgba(2,30,40,.32) !important;
  background: linear-gradient(145deg, var(--tasa-primary), var(--tasa-deep)) !important;
}
#tasa-widget .tasa-launcher .tasa-launcher-icon svg { width: 27px !important; height: 27px !important; }

#tasa-widget .tasa-close {
  width: 32px !important; height: 32px !important; min-width: 32px !important;
  border-radius: 50% !important; padding: 0 !important;
  background: rgba(255,255,255,.16) !important; color: #fff !important; border: 0 !important;
}
#tasa-widget .tasa-close:hover { background: rgba(255,255,255,.3) !important; }
#tasa-widget .tasa-close svg { width: 16px !important; height: 16px !important; }

#tasa-widget .tasa-send {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border-radius: 10px !important; padding: 0 !important; border: 0 !important; color: #fff !important;
  background: linear-gradient(140deg, var(--tasa-accent), #a51247) !important;
}
#tasa-widget .tasa-send svg { width: 18px !important; height: 18px !important; }

#tasa-widget .tasa-quote-toggle {
  width: 40px !important; height: 44px !important; min-width: 40px !important;
  border-radius: 12px !important; padding: 0 !important;
  background: var(--tasa-mist) !important; color: var(--tasa-primary) !important;
  border: 1px solid var(--tasa-line) !important;
}
#tasa-widget .tasa-quote-toggle svg { width: 20px !important; height: 20px !important; }

#tasa-widget .tasa-input {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; height: 100% !important; min-height: 0 !important;
  width: auto !important; margin: 0 !important; color: var(--tasa-ink) !important;
}
#tasa-widget .tasa-quote input,
#tasa-widget .tasa-quote textarea {
  background: #fff !important; box-shadow: none !important; line-height: 1.4 !important;
}

/* quick-action chips: wrap to 2 rows instead of cutting off */
#tasa-widget .tasa-quick { flex-wrap: wrap !important; overflow: visible !important; }
#tasa-widget .tasa-quick button { border-radius: 999px !important; flex: 0 1 auto; }

/* avatar / mini-avatar image guards */
#tasa-widget .tasa-avatar img,
#tasa-widget .tasa-mini-avatar img { max-width: none !important; }

/* =========================================================
   v1.2.2 — Dashicons normalisation + quote-form polish
   ========================================================= */
#tasa-widget .dashicons,
#tasa-widget .dashicons:before {
  box-sizing: border-box; font-style: normal; font-weight: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#tasa-widget .dashicons {
  margin: 0 !important; padding: 0 !important; background: none !important;
  text-decoration: none !important; text-transform: none !important;
}
#tasa-widget .tasa-quote {
  scrollbar-width: thin; scrollbar-color: rgba(4,76,92,.22) transparent;
}
#tasa-widget .tasa-quote::-webkit-scrollbar { width: 7px; }
#tasa-widget .tasa-quote::-webkit-scrollbar-thumb { background: rgba(4,76,92,.2); border-radius: 99px; }
#tasa-widget .tasa-quote::-webkit-scrollbar-track { background: transparent; }
#tasa-widget .tasa-quote textarea { min-height: 64px !important; max-height: 120px; }
#tasa-widget .tasa-quote-submit { width: 100% !important; }