/* FC Clip Assistant — tema "quaderno a quadretti" */

.fcclip {
  --clip-ink:      #1b2a4a;
  --clip-graphite: #3a3a38;
  --clip-grid:     #cfdcef;
  --clip-paper:    #fbfaf6;
  --clip-marker:   #ffe23d;
  --clip-metal:    #8e9baa;
  --clip-radius:   14px;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

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

/* --- La graffetta ------------------------------------------------------ */

.fcclip-clip { width: 26px; height: 36px; flex: 0 0 auto; }

.fcclip-clip-wire {
  fill: none;
  stroke: var(--clip-metal);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 0;
  transition: stroke 0.25s ease;
}

.fcclip-toggle:hover .fcclip-clip-wire { stroke: var(--clip-ink); }

/* Mentre Clip "pensa" il filo si srotola e si riavvolge. */
.fcclip-thinking .fcclip-clip-wire {
  animation: fcclip-unbend 1.4s ease-in-out infinite;
  stroke: var(--clip-ink);
}

@keyframes fcclip-unbend {
  0%, 100% { stroke-dashoffset: 0; }
  50%      { stroke-dashoffset: 46; }
}

/* --- Pulsante ---------------------------------------------------------- */

.fcclip-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 12px;
  border: 1.5px solid var(--clip-ink);
  border-radius: 999px;
  background: var(--clip-paper);
  color: var(--clip-ink);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--clip-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.fcclip-toggle:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--clip-ink); }
.fcclip-toggle:active { transform: translate(2px, 2px);   box-shadow: 1px 1px 0 var(--clip-ink); }
.fcclip-toggle:focus-visible,
.fcclip-chip:focus-visible,
.fcclip-send:focus-visible { outline: 3px solid var(--clip-marker); outline-offset: 2px; }

.fcclip[data-open="true"] .fcclip-toggle { display: none; }

/* --- Pannello ---------------------------------------------------------- */

.fcclip-panel {
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--clip-ink);
  border-radius: var(--clip-radius);
  background: var(--clip-paper);
  box-shadow: 6px 6px 0 var(--clip-ink);
  overflow: hidden;
  animation: fcclip-in 0.18s ease-out;
}

@keyframes fcclip-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.fcclip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--clip-ink);
  background: var(--clip-marker);
}

.fcclip-clip--sm { width: 20px; height: 28px; }
.fcclip-head .fcclip-clip-wire { stroke: var(--clip-ink); }

.fcclip-head-text { display: flex; flex-direction: column; line-height: 1.2; }
.fcclip-head-text strong { color: var(--clip-ink); letter-spacing: 0.02em; }
.fcclip-head-text span   { font-size: 12px; color: var(--clip-graphite); }

.fcclip-close {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--clip-ink);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.fcclip-close:hover { background: rgba(27, 42, 74, 0.1); }

/* --- Thread: carta a quadretti 5 mm ------------------------------------ */

.fcclip-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--clip-paper);
  background-image:
    linear-gradient(var(--clip-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--clip-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 1;
}

.fcclip-msg {
  max-width: 88%;
  padding: 10px 13px;
  border: 1.5px solid var(--clip-ink);
  border-radius: 12px;
  background: #fff;
  color: var(--clip-graphite);
  word-wrap: break-word;
}

.fcclip-msg--clip { align-self: flex-start; border-bottom-left-radius: 3px; }
.fcclip-msg--user {
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  background: var(--clip-ink);
  color: #fff;
  border-color: var(--clip-ink);
}

.fcclip-msg strong { color: inherit; }
.fcclip-msg a { color: var(--clip-ink); text-decoration: underline; text-underline-offset: 2px; }
.fcclip-msg--user a { color: var(--clip-marker); }
.fcclip-msg p { margin: 0 0 6px; }
.fcclip-msg p:last-child { margin-bottom: 0; }

.fcclip-msg--error { background: #fff; border-color: #b3261e; color: #b3261e; align-self: center; font-size: 13px; }

/* --- Scheda prodotto --------------------------------------------------- */

.fcclip-card {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 4px solid var(--clip-marker);
  background: #fff;
  text-decoration: none;
  color: var(--clip-graphite);
}
.fcclip-card:hover { background: #fffbe6; }
.fcclip-card-price { font-weight: 700; color: var(--clip-ink); }

/* --- Suggerimenti rapidi ----------------------------------------------- */

.fcclip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 0;
}

.fcclip-chip {
  padding: 6px 12px;
  border: 1.5px solid var(--clip-metal);
  border-radius: 999px;
  background: transparent;
  color: var(--clip-graphite);
  font-size: 13px;
  cursor: pointer;
}
.fcclip-chip:hover { border-color: var(--clip-ink); color: var(--clip-ink); background: #fff; }
.fcclip-chips[hidden] { display: none; }

/* --- Composer ---------------------------------------------------------- */

.fcclip-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
}

.fcclip-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1.5px solid var(--clip-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--clip-graphite);
  font: inherit;
}
.fcclip-input:focus { outline: 3px solid var(--clip-marker); outline-offset: 1px; }

.fcclip-send {
  width: 44px;
  border: 1.5px solid var(--clip-ink);
  border-radius: 10px;
  background: var(--clip-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.fcclip-send svg { width: 20px; height: 20px; fill: var(--clip-marker); }
.fcclip-send[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 480px) {
  .fcclip { right: 12px; bottom: 12px; left: 12px; }
  .fcclip-panel { width: 100%; height: calc(100vh - 24px); box-shadow: none; }
  .fcclip-toggle { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fcclip-panel, .fcclip-thinking .fcclip-clip-wire { animation: none; }
  .fcclip-toggle { transition: none; }
}