/* ============================================================================
   Gigetto Kids — Design system dedicato (kids.gigetto.ai)
   Progetto UI a sé (modules/kids/ui/*): NON è il core CSS fleet. Serve landing,
   portale genitore e chat shell. Dark-default + toggle chiaro (chiave condivisa
   `ggt-theme`, coerente con l'area genitore e la chat).
   Aesthetic: "quaderno di famiglia" — caldo, morbido, affidabile. Baloo 2 (display,
   rotondo, familiare senza essere infantile) + Nunito (corpo, umanista leggibile).
   Palette kids: blu fiducia #5b8def + ambra calore #ffb347 + verde sereno.
   ========================================================================== */

/* --- Token: scuro di default + override chiaro ------------------------------ */
:root {
  --k-bg:        #10182a;
  --k-bg-glow-a: rgba(91,141,239,.16);
  --k-bg-glow-b: rgba(255,179,71,.10);
  --k-surface:   #182338;
  --k-surface-2: #1f2c45;
  --k-card:      #1b2740;
  --k-text:      #eaf0fb;
  --k-muted:     #9fb0cf;
  --k-faint:     #6f80a0;
  --k-border:    #2c3a58;
  --k-border-soft: rgba(255,255,255,.06);
  --k-blue:      #5b8def;
  --k-blue-strong:#3f6fd8;
  --k-amber:     #ffb347;
  --k-amber-ink: #4a3410;
  --k-green:     #5cc99a;
  --k-green-bg:  rgba(92,201,154,.14);
  --k-rose:      #ff8a9c;
  --k-shadow:    0 18px 40px -22px rgba(0,0,0,.7);
  --k-shadow-lift: 0 26px 54px -24px rgba(0,0,0,.75);
  --k-radius:    22px;
  --k-radius-sm: 14px;
  --k-radius-pill: 999px;
  --k-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --k-body: "Nunito", system-ui, -apple-system, sans-serif;
  --k-maxw: 940px;
}
:root[data-theme="light"] {
  --k-bg:        #f4f1e9;
  --k-bg-glow-a: rgba(91,141,239,.14);
  --k-bg-glow-b: rgba(255,179,71,.16);
  --k-surface:   #ffffff;
  --k-surface-2: #fbf9f3;
  --k-card:      #ffffff;
  --k-text:      #24303f;
  --k-muted:     #5c6a7e;
  --k-faint:     #8a97a8;
  --k-border:    #e3dccb;
  --k-border-soft: rgba(36,48,63,.06);
  --k-blue:      #3f6fd8;
  --k-blue-strong:#2f57b5;
  --k-amber:     #e88f14;
  --k-amber-ink: #ffffff;
  --k-green:     #2f9d6f;
  --k-green-bg:  rgba(47,157,111,.12);
  --k-rose:      #d1536a;
  --k-shadow:    0 16px 34px -22px rgba(60,72,110,.30);
  --k-shadow-lift: 0 24px 48px -22px rgba(60,72,110,.34);
}

/* --- Reset minimo (non carichiamo il reset core sulle pagine custom) -------- */
*, *::before, *::after { box-sizing: border-box; }
.kids-ui, .kids-ui body { margin: 0; }
.kids-ui {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--k-body);
  color: var(--k-text);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--k-bg-glow-a), transparent 60%),
    radial-gradient(900px 560px at 108% 4%, var(--k-bg-glow-b), transparent 58%);
  background-attachment: fixed;
}
.kids-ui a { color: inherit; text-decoration: none; }
.kids-ui h1, .kids-ui h2, .kids-ui h3 { font-family: var(--k-display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.kids-ui p { margin: 0; }
.kids-ui button { font-family: inherit; cursor: pointer; }

/* --- Top bar (wordmark + menu profilo discreto) ---------------------------- */
.kids-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--k-bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--k-border-soft);
}
.kids-wordmark { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--k-display); font-weight: 700; font-size: 1.28rem; color: var(--k-text); }
.kids-wordmark .kids-mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--k-blue), var(--k-blue-strong));
  box-shadow: 0 8px 20px -8px var(--k-blue-strong);
}
.kids-wordmark .kids-mark-amber { background: linear-gradient(135deg, var(--k-amber), #ff9d2e); box-shadow: 0 8px 20px -8px #ff9d2e; }
.kids-topbar-actions { display: flex; align-items: center; gap: .5rem; }

/* Back link (chat shell) */
.kids-back { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--k-radius-pill); background: var(--k-surface); border: 1px solid var(--k-border); color: var(--k-muted); font-weight: 700; font-size: .9rem; transition: transform .15s, color .15s; }
.kids-back:hover { color: var(--k-text); transform: translateX(-2px); }

/* Profile menu */
.kids-profile { position: relative; }
.kids-profile-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .55rem .38rem .75rem;
  border-radius: var(--k-radius-pill); background: var(--k-surface); border: 1px solid var(--k-border);
  color: var(--k-text); font-weight: 700; font-size: .9rem;
}
.kids-profile-btn .kids-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem;
  background: linear-gradient(135deg, var(--k-amber), #ff9d2e); color: var(--k-amber-ink); font-family: var(--k-display); font-weight: 700;
}
.kids-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 210px;
  background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm);
  box-shadow: var(--k-shadow); padding: .4rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.kids-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.kids-menu-name { padding: .5rem .7rem .2rem; font-size: .8rem; color: var(--k-faint); }
.kids-menu a, .kids-menu button {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .58rem .7rem; border-radius: 10px; background: none; border: 0; color: var(--k-text);
  font-size: .92rem; font-weight: 600;
}
.kids-menu a:hover, .kids-menu button:hover { background: var(--k-surface-2); }
.kids-menu .kids-menu-exit { color: var(--k-rose); }
.kids-menu-sep { height: 1px; background: var(--k-border-soft); margin: .35rem .3rem; }

/* --- Layout shell ---------------------------------------------------------- */
.kids-wrap { max-width: var(--k-maxw); margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.4rem) clamp(1rem, 4vw, 2rem) 3rem; }

/* --- Landing --------------------------------------------------------------- */
.kids-hero { text-align: center; padding: clamp(2rem, 7vw, 4.5rem) 0 1.5rem; }
.kids-hero .kids-hero-badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: var(--k-radius-pill);
  background: var(--k-green-bg); color: var(--k-green); font-weight: 700; font-size: .82rem; margin-bottom: 1.2rem;
}
.kids-hero h1 { font-size: clamp(2.2rem, 6.5vw, 3.6rem); margin-bottom: .8rem; }
.kids-hero h1 .kids-hl { color: var(--k-blue); }
.kids-hero .kids-lede { max-width: 620px; margin: 0 auto; color: var(--k-muted); font-size: clamp(1.02rem, 2.4vw, 1.22rem); }
.kids-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

.kids-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 1.5rem; border-radius: var(--k-radius-pill);
  font-family: var(--k-display); font-weight: 700; font-size: 1.02rem; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.kids-btn:hover { transform: translateY(-2px); }
.kids-btn--primary { background: linear-gradient(135deg, var(--k-blue), var(--k-blue-strong)); color: #fff; box-shadow: 0 14px 30px -12px var(--k-blue-strong); }
.kids-btn--primary:hover { box-shadow: 0 20px 38px -12px var(--k-blue-strong); }
.kids-btn--ghost { background: var(--k-surface); color: var(--k-text); border-color: var(--k-border); }
.kids-btn--amber { background: linear-gradient(135deg, var(--k-amber), #ff9d2e); color: var(--k-amber-ink); box-shadow: 0 14px 30px -12px #ff9d2e; }

/* Promesse (Protetto / Trasparente / Tuo) */
.kids-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; }
.kids-promise { background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 1.4rem 1.3rem; box-shadow: var(--k-shadow); }
.kids-promise .kids-promise-ic { font-size: 1.7rem; line-height: 1; margin-bottom: .7rem; }
.kids-promise h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.kids-promise p { color: var(--k-muted); font-size: .94rem; }

/* Come funziona (strip onesta) */
.kids-how { margin-top: 3rem; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--k-shadow); }
.kids-how h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.kids-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kids-step { position: relative; padding-left: 0; }
.kids-step .kids-step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--k-display); font-weight: 700; background: var(--k-blue); color: #fff; margin-bottom: .55rem; }
.kids-step h4 { font-family: var(--k-display); font-weight: 700; font-size: 1rem; margin: 0 0 .2rem; }
.kids-step p { color: var(--k-muted); font-size: .88rem; }

/* --- Portale --------------------------------------------------------------- */
.kids-greeting { margin-bottom: 1.6rem; }
.kids-greeting h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.kids-greeting p { color: var(--k-muted); margin-top: .35rem; font-size: 1.02rem; }

.kids-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.kids-card {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-radius);
  padding: 1.4rem; box-shadow: var(--k-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  opacity: 0; transform: translateY(14px); animation: kids-rise .5s ease forwards;
}
.kids-card:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-lift); border-color: color-mix(in srgb, var(--k-blue) 40%, var(--k-border)); }
.kids-card .kids-card-top { display: flex; align-items: center; gap: .7rem; }
.kids-card .kids-card-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; background: var(--k-surface-2); flex: none; }
.kids-card h3 { font-size: 1.16rem; }
.kids-card .kids-card-sub { color: var(--k-muted); font-size: .92rem; }
.kids-card .kids-card-status { margin-top: auto; font-size: .86rem; font-weight: 700; color: var(--k-faint); display: inline-flex; align-items: center; gap: .4rem; }
.kids-card .kids-card-status[data-tone="ok"] { color: var(--k-green); }
.kids-card .kids-card-status[data-tone="todo"] { color: var(--k-amber); }
.kids-card::after { content: "→"; position: absolute; right: 1.3rem; top: 1.3rem; color: var(--k-faint); font-size: 1.1rem; transition: transform .18s, color .18s; }
.kids-card:hover::after { transform: translateX(3px); color: var(--k-blue); }

/* progress bar (onboarding) */
.kids-progress { height: 8px; border-radius: 6px; background: var(--k-surface-2); overflow: hidden; }
.kids-progress > span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--k-blue), var(--k-amber)); transition: width .6s ease; }

/* full-width feature card */
.kids-card--wide { grid-column: 1 / -1; }
.kids-chat-cta {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--k-blue) 22%, var(--k-surface)), var(--k-surface));
  border: 1px solid color-mix(in srgb, var(--k-blue) 34%, var(--k-border));
  border-radius: var(--k-radius); padding: 1.5rem 1.6rem; box-shadow: var(--k-shadow);
}
.kids-chat-cta .kids-chat-ic { font-size: 2rem; }
.kids-chat-cta .kids-chat-body { flex: 1 1 260px; }
.kids-chat-cta h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.kids-chat-cta p { color: var(--k-muted); font-size: .95rem; }

/* impersonation banner */
.kids-imp-banner { background: var(--k-amber); color: var(--k-amber-ink); text-align: center; font-weight: 700; padding: .5rem 1rem; font-size: .9rem; }

/* --- Footer ---------------------------------------------------------------- */
.kids-foot { max-width: var(--k-maxw); margin: 2.5rem auto 0; padding: 1.4rem clamp(1rem,4vw,2rem); border-top: 1px solid var(--k-border-soft); color: var(--k-faint); font-size: .82rem; text-align: center; }
.kids-foot a { color: var(--k-muted); text-decoration: underline; text-underline-offset: 2px; }

/* --- Theme toggle in menu -------------------------------------------------- */
.kids-theme-cap { padding: .2rem .7rem .5rem; font-size: .74rem; color: var(--k-faint); line-height: 1.4; }

@keyframes kids-rise { to { opacity: 1; transform: translateY(0); } }
.kids-card:nth-child(1){animation-delay:.02s}.kids-card:nth-child(2){animation-delay:.08s}
.kids-card:nth-child(3){animation-delay:.14s}.kids-card:nth-child(4){animation-delay:.2s}
.kids-card:nth-child(5){animation-delay:.26s}.kids-card:nth-child(6){animation-delay:.32s}
@media (prefers-reduced-motion: reduce){ .kids-card{animation:none;opacity:1;transform:none} .kids-btn:hover,.kids-card:hover{transform:none} }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
  .kids-promises, .kids-steps { grid-template-columns: 1fr; }
  .kids-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Chat shell — overlay sopra il core CSS (che rende i messaggi). Qui vestiamo
   SOLO la cornice kids; le bolle/markdown restano dal renderer core provato.
   ========================================================================== */
body.kids-chat {
  background: var(--k-bg);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--k-bg-glow-a), transparent 60%),
    radial-gradient(900px 560px at 108% 4%, var(--k-bg-glow-b), transparent 58%);
  background-attachment: fixed;
  font-family: var(--k-body);
}
body.kids-chat .kids-chatwrap { max-width: 820px; margin: 0 auto; }
body.kids-chat .chat-input-area { max-width: 820px; margin: 0 auto; }
body.kids-chat .message-thread { max-width: 820px; margin: 0 auto; }
.kids-chat-welcome { text-align: center; padding: 2.4rem 1rem 1rem; }
.kids-chat-welcome .kids-mark-lg { width: 60px; height: 60px; border-radius: 18px; display: inline-grid; place-items: center; font-size: 1.8rem; background: linear-gradient(135deg, var(--k-blue), var(--k-blue-strong)); box-shadow: 0 12px 28px -10px var(--k-blue-strong); margin-bottom: 1rem; }
.kids-chat-welcome h2 { font-family: var(--k-display); font-size: 1.5rem; color: var(--k-text); margin-bottom: .4rem; }
.kids-chat-welcome p { color: var(--k-muted); max-width: 480px; margin: 0 auto; }