/* Camilla — consulente ML Manager XG */

.camilla-guide{
  --camilla-accent:#38bdf8;
  --camilla-accent-soft:rgba(56,189,248,.18);
  position:relative;
  display:grid;
  grid-template-columns:minmax(88px,132px) minmax(0,1fr);
  gap:12px 14px;
  align-items:end;
  padding:12px 14px 10px;
  border-radius:16px;
  border:1px solid rgba(56,189,248,.32);
  background:
    radial-gradient(120% 90% at 8% 100%, rgba(56,189,248,.12), transparent 55%),
    linear-gradient(165deg, rgba(18,28,46,.96), rgba(8,12,22,.98));
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
/* display:grid sopra vince su [hidden] in alcuni browser → forza chiusura */
.camilla-guide[hidden],
.camilla-guide.is-dismissed{
  display:none !important;
}
.camilla-guide::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(56,189,248,.06) 50%, transparent 60%);
  transform:translateX(-120%);
  animation:camilla-sheen 4.8s ease-in-out infinite;
}
@keyframes camilla-sheen{
  0%,55%{transform:translateX(-120%)}
  75%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

.camilla-guide--ok{ --camilla-accent:#4ade80; --camilla-accent-soft:rgba(74,222,128,.16); border-color:rgba(74,222,128,.35); }
.camilla-guide--detail{ --camilla-accent:#7dd3fc; --camilla-accent-soft:rgba(125,211,252,.16); }
.camilla-guide--present{ --camilla-accent:#a5b4fc; --camilla-accent-soft:rgba(165,180,252,.14); border-color:rgba(165,180,252,.35); }
.camilla-guide--tip{ --camilla-accent:#38bdf8; }

.camilla-guide__fig{
  position:relative;
  z-index:1;
  margin:0;
  align-self:end;
  justify-self:center;
  width:100%;
  max-width:132px;
  line-height:0;
}
.camilla-guide__fig::after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:2px;height:10px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, var(--camilla-accent-soft), transparent 70%);
  filter:blur(2px);
  pointer-events:none;
}
.camilla-guide__img{
  display:block;
  width:100%;
  height:auto;
  max-height:168px;
  object-fit:contain;
  object-position:bottom center;
  /* Fondo nero degli asset → si fonde sulle UI scure */
  mix-blend-mode:lighten;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  transform-origin:bottom center;
  animation:camilla-enter .55s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes camilla-enter{
  from{opacity:0;transform:translateY(12px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.camilla-guide__body{
  position:relative;
  z-index:1;
  min-width:0;
  padding:4px 2px 6px 0;
}
.camilla-guide__kicker{
  margin:0 0 4px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--camilla-accent);
}
.camilla-guide__title{
  margin:0 0 6px;
  font-size:.98rem;
  font-weight:850;
  line-height:1.25;
  color:#f1f5f9;
}
.camilla-guide__text{
  margin:0;
  font-size:.84rem;
  line-height:1.4;
  color:#94a3b8;
}
.camilla-guide__text strong{ color:#e2e8f0; font-weight:750; }
.camilla-guide__text a{ color:#7dd3fc; font-weight:700; text-decoration:none; }
.camilla-guide__text a:hover{ color:#e0f2fe; text-decoration:underline; }

.camilla-guide__actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:10px;
}
.camilla-guide__cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:10px;
  font:inherit;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none!important;color:#e0f2fe!important;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--camilla-accent) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--camilla-accent) 28%, transparent), rgba(3,105,161,.2));
  box-shadow:0 2px 10px rgba(14,165,233,.15);
  transition:transform .12s ease, box-shadow .18s ease;
}
.camilla-guide__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px color-mix(in srgb, var(--camilla-accent) 28%, transparent);
}

.camilla-guide__close{
  position:absolute;top:8px;right:8px;z-index:10;
  width:36px;height:36px;padding:0;border:0;border-radius:9px;
  background:rgba(255,255,255,.08);color:#e2e8f0;font-size:1.25rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.camilla-guide__close:hover{ background:rgba(248,113,113,.15); color:#fecaca; }
.camilla-guide:has(.camilla-guide__close) .camilla-guide__body{
  padding-right: 2.4rem;
}

.camilla-guide__toggle{
  position:absolute;top:8px;right:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  margin:0;padding:5px 9px;border:0;border-radius:9px;
  background:rgba(255,255,255,.06);color:#94a3b8;
  font:inherit;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;line-height:1;
}
.camilla-guide__toggle:hover{ background:rgba(56,189,248,.16); color:#e0f2fe; }
.camilla-guide__toggle-ico{
  font-size:.62rem;
  transition:transform .18s ease;
}
.camilla-guide__toggle-label--expand{ display:none; }
.camilla-guide.is-collapsed .camilla-guide__toggle-label--collapse{ display:none; }
.camilla-guide.is-collapsed .camilla-guide__toggle-label--expand{ display:inline; }
.camilla-guide.is-collapsed .camilla-guide__toggle-ico{ transform:rotate(180deg); }

/* Stato ridotto: una riga, tip leggibile senza rubare viewport */
.camilla-guide.is-collapsed{
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:8px 10px;
  padding:6px 72px 6px 10px;
  min-height:0;
}
.camilla-guide.is-collapsed .camilla-guide__fig{
  max-width:48px;
  align-self:center;
}
.camilla-guide.is-collapsed .camilla-guide__img{
  max-height:52px;
  animation:none;
}
.camilla-guide.is-collapsed .camilla-guide__body{ padding:0; }
.camilla-guide.is-collapsed .camilla-guide__kicker{
  margin:0 0 1px;
  font-size:.58rem;
}
.camilla-guide.is-collapsed .camilla-guide__title{
  margin:0;
  font-size:.78rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.camilla-guide--collapsible .camilla-guide__body{
  padding-right: 4.5rem;
}
.camilla-guide.is-collapsed.camilla-guide--collapsible .camilla-guide__body{
  padding-right: 0;
}

@media (max-width:560px){
  .camilla-guide__toggle{
    padding: 6px 8px;
  }
  .camilla-guide__toggle-label{
    position:absolute;
    width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);border:0;
  }
  .camilla-guide.is-collapsed{
    padding-right: 48px;
  }
}

/* Layout: banner più basso / full-width */
.camilla-guide--banner{
  grid-template-columns:minmax(72px,110px) minmax(0,1fr);
  align-items:center;
  padding:8px 14px 6px;
}
.camilla-guide--banner .camilla-guide__img{ max-height:128px; }

/* Layout: compact (toast-like) */
.camilla-guide--compact{
  grid-template-columns:72px minmax(0,1fr);
  gap:8px 10px;
  padding:8px 10px 6px;
  border-radius:14px;
}
.camilla-guide--compact .camilla-guide__img{ max-height:96px; }
.camilla-guide--compact .camilla-guide__title{ font-size:.9rem; }
.camilla-guide--compact .camilla-guide__text{ font-size:.78rem; }

/* Layout: full-body (onboarding) */
.camilla-guide--full{
  grid-template-columns:minmax(120px,200px) minmax(0,1fr);
  align-items:center;
}
.camilla-guide--full .camilla-guide__img{
  max-height:280px;
  mix-blend-mode:lighten;
}

@media (max-width:560px){
  .camilla-guide{
    grid-template-columns:84px minmax(0,1fr);
    gap:8px 10px;
    padding:10px 12px 8px;
  }
  .camilla-guide__img{ max-height:132px; }
  .camilla-guide--full{
    grid-template-columns:1fr;
    text-align:center;
  }
  .camilla-guide--full .camilla-guide__fig{
    max-width:160px;margin:0 auto;
  }
  .camilla-guide--full .camilla-guide__actions{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .camilla-guide::before,
  .camilla-guide__img{ animation:none; }
}

/* Driver.js popover + Camilla */
.xg-driver-camilla{
  display:flex;
  align-items:flex-end;
  gap:10px;
  text-align:left;
}
.xg-driver-camilla__face{
  flex:0 0 auto;
  width:56px;
  height:72px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  margin-bottom:-2px;
}
.xg-driver-camilla__face img{
  display:block;
  width:56px;
  height:auto;
  max-height:76px;
  object-fit:contain;
  object-position:bottom center;
  mix-blend-mode:lighten;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.xg-driver-camilla__txt{
  flex:1;
  min-width:0;
  font-size:.9em;
  line-height:1.4;
}
.driver-popover.xg-driver-popover--camilla,
.driver-popover.mgr-driver-popover{
  max-width:min(380px, calc(100vw - 32px));
}
.driver-popover.xg-driver-popover--camilla .driver-popover-title{
  font-weight:800;
}