/* ============================================================
   ASISTENT TEHNIC — chat widget (self-injected by js/assistant.js)
   Every selector is prefixed .sha- so nothing leaks into the site.
   Colors/radii/shadows/motion come only from the :root tokens in
   styles.css.
   ============================================================ */

.sha-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- fallback stack when the page has no .fab-stack ---------- */
.sha-stack {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- FAB ---------- */
.sha-fab {
  position: relative;
  width: 54px; height: 54px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--zinc);
  color: var(--zinc-text);
  box-shadow: var(--shadow-zinc);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-ui), background var(--t-ui);
}
.sha-fab .sha-ico { width: 27px; height: 27px; }
.sha-fab:hover { background: var(--zinc-2); transform: scale(1.06); }
.sha-fab:active { transform: translateY(0) scale(0.98); }
.sha-fab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* first-visit pulse */
.sha-pulse {
  position: absolute;
  top: -1px; right: -1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  opacity: 0;
}
.sha-fab--first .sha-pulse { opacity: 1; }
.sha-fab--first .sha-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: sha-ping 1.9s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes sha-ping {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* one-time tooltip, anchored to the FAB it lives in */
.sha-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: min(230px, calc(100vw - 7rem));
  background: var(--steel);
  color: var(--on-steel);
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-ui);
}
.sha-tip::after {
  content: '';
  position: absolute;
  right: -4px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  background: var(--steel);
  transform: rotate(45deg);
  border-radius: 1px;
}
.sha-fab--first .sha-tip { opacity: 1; }
.sha-fab--first.sha-fab--tip-out .sha-tip { opacity: 0; }

/* ---------- panel ----------
   --sha-lift is the whole distance from the viewport bottom (assistant.js
   measures it off the FAB, so it already carries the 1.5rem gutter plus any
   cookie-bar / buy-bar inset the .fab-stack is offset by). */
.sha-panel {
  --sha-lift: 90px;
  position: fixed;
  z-index: 1450;
  right: 1.5rem;
  bottom: var(--sha-lift);
  width: 380px;
  height: 560px;
  max-height: calc(100vh - var(--sha-lift) - 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--f-body);
  color: var(--body);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transform-origin: 100% 100%;
  transition: opacity 0.25s cubic-bezier(.2, .7, .3, 1), transform 0.25s cubic-bezier(.2, .7, .3, 1);
}
.sha-panel[hidden] { display: none; }
.sha-panel.is-open { opacity: 1; transform: none; }
/* No border-radius here: the outline already follows each element's own
   radius, and forcing --r-sm squares off the pill-shaped chips. */
.sha-panel :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- header ---------- */
.sha-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  padding: 0.8rem 0.85rem 0.8rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.sha-head-ico {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--zinc-tint);
  color: var(--zinc-ink);
  display: grid;
  place-items: center;
}
.sha-head-ico .sha-ico { width: 22px; height: 22px; }
.sha-head-txt { flex: 1 1 auto; min-width: 0; }
.sha-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 116;
  font-size: 1rem;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sha-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}
.sha-ico-btn {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--t-ui), color var(--t-ui);
}
.sha-ico-btn:hover { background: var(--panel-2); color: var(--ink); }

/* ---------- message log ---------- */
.sha-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sha-turn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 100%;
}
.sha-turn--user { align-items: flex-end; }
.sha-msg {
  margin: 0;
  max-width: 92%;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: var(--r);
}
.sha-msg--bot {
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-sm);
  color: var(--body);
  box-shadow: var(--shadow-sm);
}
.sha-msg--user {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-bottom-right-radius: var(--r-sm);
  color: var(--ink);
}
.sha-note {
  margin: 0;
  max-width: 92%;
  padding: 0.5rem 0.7rem;
  background: var(--zinc-tint);
  border-radius: var(--r-sm);
  color: var(--zinc-ink);
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 500;
}

/* typing indicator */
.sha-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.75rem 0.8rem;
}
.sha-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: sha-bounce 1s ease-in-out infinite;
}
.sha-typing i:nth-child(2) { animation-delay: 0.15s; }
.sha-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sha-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- product cards ---------- */
.sha-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sha-prod {
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-ui), box-shadow var(--t-ui);
}
.sha-prod:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.sha-prod-media {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.sha-prod-media img { width: 100%; height: 100%; object-fit: contain; }
.sha-prod-ico { font-size: 1.2rem; color: var(--accent-ink); opacity: 0.7; }
.sha-prod-ico.sha-ico, .sha-prod-media svg { width: 26px; height: 26px; color: var(--accent-ink); }
.sha-prod-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sha-name {
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sha-name:hover { color: var(--accent-ink); text-decoration: underline; }
.sha-prod-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.sha-dim {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
  background: var(--panel-2);
  border-radius: 4px;
  padding: 2px 6px;
}
.sha-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 116;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.sha-stockline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
  color: var(--muted);
}
.sha-dot {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
}
.sha-dot--out { background: var(--alert); }
.sha-prod-acts,
.sha-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

/* ---------- buttons inside the chat ---------- */
.sha-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-ui), border-color var(--t-ui), color var(--t-ui), transform var(--t-ui);
}
.sha-btn:active { transform: translateY(0) scale(0.98); }
.sha-btn--buy {
  background: var(--zinc);
  color: var(--zinc-text);
  box-shadow: var(--shadow-sm);
}
.sha-btn--buy:hover { background: var(--zinc-2); }
.sha-btn--ghost {
  background: var(--bg);
  border-color: var(--line-2);
  color: var(--ink);
}
.sha-btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.sha-btn--ghost[disabled] {
  color: var(--muted);
  background: var(--panel-2);
  border-color: var(--line);
  cursor: not-allowed;
}
.sha-btn--wa { background: var(--whatsapp-btn); color: var(--bg); }
.sha-btn--wa:hover { background: var(--success); }

/* ---------- quick replies ---------- */
.sha-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sha-chips::-webkit-scrollbar { display: none; }
.sha-chips[hidden] { display: none; }
.sha-chip {
  flex: 0 0 auto;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-ui), border-color var(--t-ui);
}
.sha-chip:hover { background: var(--accent-tint); border-color: var(--accent); }

/* ---------- composer ---------- */
.sha-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.9rem;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.sha-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  background: var(--panel-2);
  border: 1.5px solid var(--line-input, var(--line-2));
  border-radius: var(--r-sm);
}
.sha-input::placeholder { color: var(--muted); }
.sha-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-2);
}
/* Drop the UA ring only for pointer/typing focus — keyboard focus keeps the
   panel's 3px outline on top of the accent border. */
.sha-input:focus:not(:focus-visible) { outline: none; }
.sha-send {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--zinc);
  color: var(--zinc-text);
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-ui), transform var(--t-ui);
}
.sha-send:hover { background: var(--zinc-2); }
.sha-send:active { transform: translateY(0) scale(0.98); }

/* ---------- mobile: full-screen sheet ---------- */
@media (max-width: 639.98px) {
  .sha-panel {
    inset: 0;
    right: 0; bottom: 0;
    width: auto;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(18px);
  }
  /* The cookie bar sits at z-index 9999, above the sheet: end the sheet where
     the bar starts so the composer never disappears under it. */
  body.cookie-open .sha-panel { bottom: var(--cookie-h, 0px); }
  .sha-msg { max-width: 96%; }
  .sha-tip { max-width: min(200px, calc(100vw - 6.5rem)); }
}

/* short viewports (landscape phones, small laptops) */
@media (min-width: 640px) and (max-height: 700px) {
  .sha-panel { height: calc(100vh - var(--sha-lift) - 1.5rem); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sha-panel { transition: none; }
  .sha-fab, .sha-btn, .sha-chip, .sha-send, .sha-ico-btn, .sha-prod, .sha-tip { transition: none; }
  .sha-fab:hover { transform: none; }
  .sha-fab--first .sha-pulse::after { animation: none; opacity: 0; }
  .sha-typing i { animation: none; opacity: 0.6; }
}