/* ==========================================================================
   Assistente per i brand — fumetto e pannello chat (js/assistant.js)
   ========================================================================== */

.assistant {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-overlay);
  font-family: var(--font-body);
}

.assistant-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.15rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: var(--color-on-accent);
  font: 600 var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 12px 34px -10px var(--color-accent-glow);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.assistant.is-open .assistant-launcher { display: none; }

@media (hover: hover) {
  .assistant-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px var(--color-accent-glow); }
  .assistant-chip:hover { border-color: var(--color-accent); color: var(--color-fg); }
  .assistant-close:hover { color: var(--color-fg); background: var(--color-surface-2); }
}

.assistant-launcher:focus-visible,
.assistant-close:focus-visible,
.assistant-send:focus-visible,
.assistant-chip:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.assistant-panel {
  width: min(390px, calc(100vw - 2rem));
  height: min(600px, calc(100dvh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: assistant-in var(--dur-base) var(--ease-out);
}
.assistant-panel[hidden] { display: none; }

@keyframes assistant-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.assistant-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.assistant-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-on-accent);
  font: 600 var(--fs-md) / 1 var(--font-display);
}
.assistant-head__text { flex: 1; min-width: 0; }
.assistant-title { margin: 0; color: var(--color-fg); font: 600 var(--fs-sm) / 1.3 var(--font-body); }
.assistant-subtitle { margin: 2px 0 0; color: var(--color-fg-muted); font-size: var(--fs-xs); }
.assistant-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
}

.assistant-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overscroll-behavior: contain;
}
.assistant-msg {
  max-width: 86%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-msg--assistant { align-self: flex-start; background: var(--color-surface-2); color: var(--color-fg); border-bottom-left-radius: 4px; white-space: normal; }
.assistant-msg p { margin: 0 0 0.7em; }
.assistant-msg p:last-child, .assistant-msg ul:last-child { margin-bottom: 0; }
.assistant-msg ul { margin: 0 0 0.7em; padding-left: 1.1em; }
.assistant-msg li { margin: 0.15em 0; }
.assistant-msg strong { color: var(--color-accent-soft); font-weight: 600; }
.assistant-msg--user { align-self: flex-end; background: var(--color-accent); color: var(--color-on-accent); border-bottom-right-radius: 4px; }
.assistant-msg.is-typing { color: var(--color-fg-muted); font-style: italic; }
.assistant-msg.is-error { border: 1px solid rgba(236, 72, 153, 0.45); }
.assistant-sent {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-1);
  color: var(--color-accent-soft);
  font-size: var(--fs-xs);
}

.assistant-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.assistant-chips:empty { display: none; }
.assistant-chip {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-fg-muted);
  font: 500 var(--fs-xs) / 1.2 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.assistant-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0 var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.assistant-form:focus-within { border-color: var(--color-accent); }
.assistant-input {
  flex: 1;
  min-height: 24px;
  max-height: 120px;
  padding: 0.35rem 0.4rem;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--color-fg);
  font: var(--fs-sm) / 1.45 var(--font-body);
}
.assistant-input::placeholder { color: var(--color-fg-faint); }
.assistant-send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
.assistant-send:disabled { opacity: 0.5; cursor: default; }

.assistant-privacy {
  margin: var(--space-2) var(--space-4) var(--space-3);
  color: var(--color-fg-faint);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  text-align: center;
}

/* Phone: the launcher becomes a round button, the panel a sheet over the page. */
@media (max-width: 560px) {
  .assistant-launcher { padding: 0.95rem; }
  .assistant-launcher__label { display: none; }
  .assistant.is-open { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .assistant-panel { width: 100%; height: min(78dvh, 640px); }
  .assistant-input { font-size: 16px; } /* below 16px iOS Safari zooms the page on focus */
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panel { animation: none; }
  .assistant-launcher { transition: none; }
}