/* ==========================================================================
   TechPointZoneAI Chat Widget
   ========================================================================== */

:root {
  --tpzai-primary:       #0068c8;
  --tpzai-primary-dark:  #0057a8;
  --tpzai-primary-light: #e6f0fb;
  --tpzai-surface:       #ffffff;
  --tpzai-bg:            #f8fafc;
  --tpzai-border:        #e2e8f0;
  --tpzai-text:          #1e293b;
  --tpzai-text-muted:    #64748b;
  --tpzai-user-bg:       #0068c8;
  --tpzai-user-text:     #ffffff;
  --tpzai-bot-bg:        #f1f5f9;
  --tpzai-bot-text:      #1e293b;
  --tpzai-shadow:        0 20px 60px rgba(0, 0, 0, 0.15);
  --tpzai-radius:        16px;
  --tpzai-radius-sm:     10px;
  --tpzai-launcher-size: 58px;
  --tpzai-panel-w:       380px;
  --tpzai-panel-h:       580px;
  --tpzai-z:             99999999;
  --tpzai-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tpzai-transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Root container
   -------------------------------------------------------------------------- */
#tpzai-root {
  position:   fixed;
  bottom:     24px;
  right:      24px;
  z-index:    var(--tpzai-z);
  font-family: var(--tpzai-font);
  font-size:  14px;
  line-height: 1.5;
  color:      var(--tpzai-text);
}
#tpzai-root,
#tpzai-root * {
  box-sizing: border-box;
}
#tpzai-root button,
#tpzai-root textarea {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--tpzai-font);
}
#tpzai-root button {
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}
#tpzai-root svg {
  display: block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Launcher button
   -------------------------------------------------------------------------- */
#tpzai-launcher {
  width:            var(--tpzai-launcher-size);
  height:           var(--tpzai-launcher-size);
  min-width:        var(--tpzai-launcher-size);
  min-height:       var(--tpzai-launcher-size);
  max-width:        var(--tpzai-launcher-size);
  max-height:       var(--tpzai-launcher-size);
  padding:          0;
  border-radius:    50%;
  background:       var(--tpzai-primary);
  color:            #fff;
  border:           none;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 4px 20px rgba(0, 104, 200, 0.4);
  transition:       transform var(--tpzai-transition),
                    box-shadow var(--tpzai-transition),
                    background var(--tpzai-transition);
  outline:          none;
  position:         relative;
  z-index:          calc(var(--tpzai-z) + 1);
}
#tpzai-launcher svg {
  display: block !important;
  color: #fff;
  fill: currentColor !important;
  margin: 0;
  pointer-events: none;
}
#tpzai-launcher svg path {
  fill: currentColor !important;
}
#tpzai-launcher #tpzai-icon-chat {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
}
#tpzai-launcher #tpzai-icon-close {
  display: none !important;
  width: 22px !important;
  height: 22px !important;
}
#tpzai-root.tpzai-open #tpzai-icon-chat {
  display: none !important;
}
#tpzai-root.tpzai-open #tpzai-icon-close {
  display: block !important;
}
#tpzai-launcher:hover {
  background:    var(--tpzai-primary-dark);
  transform:     scale(1.08);
  box-shadow:    0 6px 28px rgba(0, 104, 200, 0.5);
}
#tpzai-launcher:focus-visible {
  outline:       3px solid var(--tpzai-primary-light);
  outline-offset: 2px;
}

/* Notification badge */
#tpzai-launcher::after {
  content:       '';
  position: absolute;
  top: 0px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:    #10b981;
  border:        2px solid #fff;
  display:       block;
}
#tpzai-root.tpzai-open #tpzai-launcher::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Chat panel
   -------------------------------------------------------------------------- */
#tpzai-panel {
  position:      absolute;
  bottom:        calc(var(--tpzai-launcher-size) + 12px);
  right:         0;
  width:         var(--tpzai-panel-w);
  height:        var(--tpzai-panel-h);
  background:    var(--tpzai-surface);
  border-radius: var(--tpzai-radius);
  box-shadow:    var(--tpzai-shadow);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  border:        1px solid var(--tpzai-border);
  transform-origin: bottom right;
  animation:     tpzai-panel-in var(--tpzai-transition);
}

@keyframes tpzai-panel-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
#tpzai-header {
  background:   linear-gradient(135deg, var(--tpzai-primary) 0%, var(--tpzai-primary-dark) 100%);
  color:        #fff;
  padding:      14px 16px;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  flex-shrink:  0;
}
#tpzai-header-info {
  display:     flex;
  align-items: center;
  gap:         10px;
}
#tpzai-avatar {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     14px;
  flex-shrink:   0;
  letter-spacing: 0.5px;
}
#tpzai-header-title {
  font-weight:  600;
  font-size:    14px;
  line-height:  1.3;
}
#tpzai-close-btn {
  background:  transparent;
  border:      none;
  color:       rgba(255,255,255,0.8);
  cursor:      pointer;
  padding:     4px;
  border-radius: 6px;
  display:     flex;
  align-items: center;
  transition:  color var(--tpzai-transition), background var(--tpzai-transition);
}
#tpzai-close-btn:hover {
  color:       #fff;
  background:  rgba(255,255,255,0.15);
}

/* WhatsApp button in header — icon-only, brand green */
#tpzai-whatsapp-btn {
  background:      #25D366;
  border:          none;
  color:           #fff;
  cursor:          pointer;
  width:           34px;
  height:          34px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  text-decoration: none;
  transition:      background var(--tpzai-transition), transform var(--tpzai-transition), box-shadow var(--tpzai-transition);
  box-shadow:      0 2px 8px rgba(37, 211, 102, 0.4);
}
#tpzai-whatsapp-btn:hover {
  background:      #1ebe5d;
  color:           #fff;
  transform:       scale(1.1);
  box-shadow:      0 4px 14px rgba(37, 211, 102, 0.55);
  text-decoration: none;
}
#tpzai-header-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
#tpzai-messages {
  flex:         1;
  overflow-y:   auto;
  padding:      16px;
  display:      flex;
  flex-direction: column;
  gap:          12px;
  background:   var(--tpzai-bg);
  scroll-behavior: smooth;
}
#tpzai-messages::-webkit-scrollbar { width: 4px; }
#tpzai-messages::-webkit-scrollbar-track { background: transparent; }
#tpzai-messages::-webkit-scrollbar-thumb { background: var(--tpzai-border); border-radius: 2px; }

/* Bubble base */
.tpzai-msg {
  display:       flex;
  flex-direction: column;
  max-width:     88%;
  gap:           2px;
  animation:     tpzai-msg-in 0.2s ease;
}
/* Expand bot messages that contain structured cards to use full width */
.tpzai-msg.tpzai-bot:has(.tpzai-products-grid),
.tpzai-msg.tpzai-bot:has(.tpzai-orders-list) {
  max-width: 100%;
}
@keyframes tpzai-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tpzai-msg.tpzai-user {
  align-self:    flex-end;
  align-items:   flex-end;
}
.tpzai-msg.tpzai-bot {
  align-self:    flex-start;
  align-items:   flex-start;
}

.tpzai-bubble {
  padding:       10px 14px;
  border-radius: 14px;
  line-height:   1.55;
  word-break:    break-word;
  white-space:   pre-wrap;
}
.tpzai-user .tpzai-bubble {
  background:    var(--tpzai-user-bg);
  color:         var(--tpzai-user-text);
  border-bottom-right-radius: 4px;
}
.tpzai-bot .tpzai-bubble {
  background:    var(--tpzai-bot-bg);
  color:         var(--tpzai-bot-text);
  border-bottom-left-radius: 4px;
}
/* When bubble contains structured cards, give it more room */
.tpzai-bot .tpzai-bubble:has(.tpzai-products-grid),
.tpzai-bot .tpzai-bubble:has(.tpzai-orders-list) {
  background:    transparent;
  padding:       4px 0;
  max-width:     100%;
}

.tpzai-msg-time {
  font-size:  10px;
  color:      var(--tpzai-text-muted);
  padding:    0 4px;
}

/* Typing indicator */
.tpzai-typing-bubble {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     12px 16px;
}
.tpzai-typing-bubble span {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--tpzai-text-muted);
  animation:     tpzai-bounce 1.2s ease-in-out infinite;
}
.tpzai-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.tpzai-typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes tpzai-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* Streaming cursor */
.tpzai-cursor {
  display:           inline-block;
  width:             2px;
  height:            1em;
  background:        var(--tpzai-primary);
  margin-left:       2px;
  vertical-align:    text-bottom;
  animation:         tpzai-blink 0.7s step-end infinite;
}
@keyframes tpzai-blink {
  50% { opacity: 0; }
}

/* Error state */
.tpzai-error-bubble {
  background:    #fef2f2 !important;
  color:         #b91c1c !important;
  border:        1px solid #fecaca;
}

/* --------------------------------------------------------------------------
   Response text inside bot bubble
   -------------------------------------------------------------------------- */
.tpzai-response-text {
  margin:      0 0 8px;
  line-height: 1.55;
}
.tpzai-response-text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Product cards grid
   -------------------------------------------------------------------------- */
.tpzai-products-grid {
  display:   flex;
  flex-direction: column;
  gap:       10px;
  width:     100%;
  margin-top: 6px;
}

/* Card wrapper */
.tpzai-product-card {
  background:    var(--tpzai-surface);
  border:        1px solid var(--tpzai-border);
  border-radius: var(--tpzai-radius-sm);
  overflow:      hidden;
  display:       flex;
  flex-direction: row;
  transition:    box-shadow var(--tpzai-transition), transform var(--tpzai-transition);
}
.tpzai-product-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  transform:  translateY(-2px);
}

/* Image column */
.tpzai-card-img-wrap {
  width:       110px;
  min-width:   110px;
  background:  var(--tpzai-bg);
  display:     flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--tpzai-border);
  padding:     8px;
}
.tpzai-card-img {
  width:      100%;
  height:     90px;
  object-fit: contain;
  display:    block;
}
.tpzai-card-img-placeholder {
  width:       100%;
  height:      90px;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--tpzai-text-muted);
}

/* Body column */
.tpzai-card-body {
  flex:       1;
  padding:    10px 12px;
  display:    flex;
  flex-direction: column;
  gap:        4px;
  min-width:  0;
}
.tpzai-card-title {
  font-size:    12.5px;
  font-weight:  600;
  color:        var(--tpzai-text);
  margin:       0;
  line-height:  1.35;
  /* clamp to 2 lines */
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
}
.tpzai-card-price {
  font-size:   13px;
  font-weight: 700;
  color:       var(--tpzai-primary);
  line-height: 1;
}
.tpzai-card-price ins  { text-decoration: none; }
.tpzai-card-price del  { font-size: 11px; color: var(--tpzai-text-muted); font-weight: 400; }

/* Stock badge */
.tpzai-stock-badge {
  display:       inline-block;
  font-size:     10px;
  font-weight:   600;
  padding:       2px 7px;
  border-radius: 20px;
  width:         fit-content;
}
.tpzai-stock-in  { background: #d1fae5; color: #065f46; }
.tpzai-stock-out { background: #fee2e2; color: #991b1b; }

/* Spec tags */
.tpzai-card-specs {
  display:   flex;
  flex-wrap: wrap;
  gap:       3px;
  margin:    1px 0;
}
.tpzai-spec-tag {
  background:    var(--tpzai-primary-light);
  color:         var(--tpzai-primary);
  font-size:     9.5px;
  padding:       2px 6px;
  border-radius: 20px;
  font-weight:   500;
  white-space:   nowrap;
}

/* Short description */
.tpzai-card-desc {
  font-size:   11px;
  color:       var(--tpzai-text-muted);
  margin:      0;
  line-height: 1.4;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* CTA button */
.tpzai-card-cta {
  display:         inline-block;
  margin-top:      auto;
  padding:         5px 12px;
  background:      var(--tpzai-primary);
  color:           #fff !important;
  text-align:      center;
  border-radius:   6px;
  font-size:       11.5px;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background var(--tpzai-transition);
  width:           fit-content;
  align-self:      flex-start;
}
.tpzai-card-cta:hover {
  background:      var(--tpzai-primary-dark);
}

/* --------------------------------------------------------------------------
   Order cards
   -------------------------------------------------------------------------- */
.tpzai-orders-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  width:          100%;
  max-width:      100%;
  margin-top:     6px;
  min-width:      0;
  box-sizing:     border-box;
}
.tpzai-order-card {
  background:    var(--tpzai-surface);
  border:        1px solid var(--tpzai-border);
  border-radius: var(--tpzai-radius-sm);
  padding:       12px;
  width:         100%;
  max-width:     100%;
  min-width:     0;
  box-sizing:    border-box;
  overflow:      hidden;
  box-shadow:    0 2px 10px rgba(15, 23, 42, 0.05);
}
.tpzai-order-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             10px;
  margin-bottom:   10px;
  min-width:       0;
}
.tpzai-order-top > div {
  min-width: 0;
}
.tpzai-order-label {
  color:          var(--tpzai-text-muted);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tpzai-order-number {
  color:       var(--tpzai-text);
  font-size:   16px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tpzai-order-status {
  border-radius: 999px;
  font-size:     10.5px;
  font-weight:   700;
  padding:       4px 8px;
  white-space:   nowrap;
  flex-shrink:   0;
  background:    #e0f2fe;
  color:         #075985;
}
.tpzai-order-status-processing,
.tpzai-order-status-on-hold {
  background: #fef3c7;
  color:      #92400e;
}
.tpzai-order-status-completed {
  background: #d1fae5;
  color:      #065f46;
}
.tpzai-order-status-cancelled,
.tpzai-order-status-failed,
.tpzai-order-status-refunded {
  background: #fee2e2;
  color:      #991b1b;
}
.tpzai-order-meta {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   8px;
  margin-bottom:         10px;
  min-width:             0;
}
.tpzai-order-metric {
  min-width: 0;
}
.tpzai-order-metric span,
.tpzai-order-items span {
  display:       block;
  color:         var(--tpzai-text-muted);
  font-size:     10.5px;
  font-weight:   650;
  margin-bottom: 2px;
}
.tpzai-order-metric strong {
  display:     block;
  color:       var(--tpzai-text);
  font-size:   12px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tpzai-order-items {
  border-top:  1px solid var(--tpzai-border);
  padding-top: 9px;
  min-width:   0;
}
.tpzai-order-items p {
  color:       var(--tpzai-text);
  font-size:   12px;
  line-height: 1.4;
  margin:      0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.tpzai-order-tracking {
  margin-top:    9px;
  border-radius: 8px;
  background:    var(--tpzai-primary-light);
  color:         var(--tpzai-primary-dark);
  font-size:     11.5px;
  font-weight:   650;
  padding:       8px 9px;
  overflow-wrap: anywhere;
  word-break:    break-word;
  box-sizing:    border-box;
}

/* --------------------------------------------------------------------------
   Footer / input
   -------------------------------------------------------------------------- */
#tpzai-footer {
  background:    var(--tpzai-surface);
  border-top:    1px solid var(--tpzai-border);
  padding:       10px 12px 8px;
  flex-shrink:   0;
}
#tpzai-input-wrap {
  display:       flex;
  align-items: center;
  gap:           8px;
  background:    var(--tpzai-bg);
  border:        1.5px solid var(--tpzai-border);
  border-radius: 12px;
  padding:       5px 5px;
  transition:    border-color var(--tpzai-transition);
}
#tpzai-input-wrap:focus-within {
  border-color: var(--tpzai-primary);
}
#tpzai-input {
  flex:          1;
  display:       block;
  width:         100%;
  min-width:     0;
  border:        none;
  border-radius: 0;
  background:    transparent;
  resize:        none;
  font-family:   var(--tpzai-font);
  font-size:     14px;
  line-height:   1.5;
  color:         var(--tpzai-text);
  outline:       none;
  padding:       0 10px;
  margin:        0;
  box-shadow:    none;
	height: 22px;
  max-height:    100px;
  overflow-y:    auto;
}
#tpzai-input:focus {
  border:     none;
  box-shadow: none;
  outline:    none;
}
#tpzai-input::placeholder { color: var(--tpzai-text-muted); }
#tpzai-send-btn {
  width:         34px;
  height:        34px;
  min-width:     34px;
  min-height:    34px;
  padding:       0;
  border-radius: 8px;
  background:    var(--tpzai-primary);
  color:         #fff;
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    background var(--tpzai-transition), transform var(--tpzai-transition);
}
#tpzai-send-btn svg {
  display: block !important;
  width:   20px !important;
  height:  20px !important;
  fill:    currentColor !important;
  color:   inherit;
  margin:  0;
  pointer-events: none;
}
#tpzai-send-btn svg path {
  fill: currentColor !important;
}
#tpzai-send-btn:hover  { background: var(--tpzai-primary-dark); }
#tpzai-send-btn:active { transform: scale(0.92); }
#tpzai-send-btn:disabled {
  background:  var(--tpzai-border);
  color:       #fff;
  cursor:      not-allowed;
  transform:   none;
}
#tpzai-powered-by {
  text-align:  center;
  font-size:   10px;
  color:       var(--tpzai-text-muted);
  margin-top:  6px;
}

/* --------------------------------------------------------------------------
   Mobile responsive
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --tpzai-panel-w: calc(100vw - 16px);
    --tpzai-panel-h: 72vh;
  }
  #tpzai-root {
    bottom: 16px;
    right:  8px;
  }
  #tpzai-panel {
    right: 0;
    bottom: calc(var(--tpzai-launcher-size) + 8px);
  }
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.tpzai-visually-hidden {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  border:    0;
}