*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #070714;
  --blue: #38bdf8;
  --orange: #fb923c;
  --violet: #a78bfa;
  --green: #4ade80;
  --yellow: #facc15;
  --red: #fb7185;
  --white: #f0f0f8;
  --muted: rgba(240,240,248,.6);
  --faint: rgba(240,240,248,.36);
  --card-bg: rgba(255,255,255,.035);
  --card-border: rgba(255,255,255,.08);
  --radius: 16px;
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--white);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Cielo: stelle disegnate una volta + nebulosa fissa (come la homepage, senza animazione continua) */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.nebula {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px circle at 12% -4%, rgba(167,139,250,.13), transparent 70%),
    radial-gradient(560px circle at 100% 38%, rgba(56,189,248,.07), transparent 70%),
    radial-gradient(480px circle at 20% 105%, rgba(236,72,153,.05), transparent 70%);
}
#app, .toast { position: relative; z-index: 1; }

#app {
  max-width: 920px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}

/* Header */
.top {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0 18px;
}
.top .mascot { width: 76px; height: 76px; flex: none; margin: -4px -2px -6px -6px; }
.top h1 {
  font-size: 26px; font-weight: 200; letter-spacing: .08em;
}
.top h1 strong {
  font-weight: 600;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8, #22d3ee, #a78bfa, #8b5cf6);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: galaxyShift 12s linear infinite;
}
@keyframes galaxyShift { to { background-position: 280% 50%; } }
.top .mood { font-size: 13px; color: var(--muted); margin-top: 1px; }
.top .titles { min-width: 0; flex: 1; }
.top .mood { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin: 22px 2px 10px;
}
.section-label small { font-size: 11px; letter-spacing: .02em; text-transform: none; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Stato siti */
.status { padding: 4px 0; }
/* Nome e metriche sulla stessa riga; se non ci stanno, le metriche vanno a capo sotto, a destra. */
.site {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 10px; row-gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  min-height: 44px;
}
.site .dot { flex: none; }
.site .name { flex: 1 0 auto; max-width: calc(100% - 19px); }
.site .metrics { margin-left: auto; }
.site + .site { border-top: 1px solid rgba(255,255,255,.05); }
.site:active { background: rgba(255,255,255,.04); }
.site .name { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .metrics { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.dot.ok { background: var(--green); box-shadow: 0 0 10px rgba(74,222,128,.55); }
.dot.warn { background: var(--yellow); box-shadow: 0 0 10px rgba(250,204,21,.5); }
.dot.bad { background: var(--red); box-shadow: 0 0 10px rgba(251,113,133,.6); }
.metric {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.metric b { font-weight: 600; color: var(--white); }
.metric.warn, .metric.warn b { color: var(--yellow); }
.metric.bad, .metric.bad b { color: var(--red); }
.metric + .metric::before { content: '·'; margin-right: 6px; color: var(--faint); }
.status-note { padding: 10px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.05); }
.status-error { display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 14px; color: var(--muted); }

/* Coda */
.queue { display: flex; flex-direction: column; }
.queue a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-decoration: none; font-size: 14px; min-height: 44px; }
.queue a + a { border-top: 1px solid rgba(255,255,255,.05); }
.queue .q-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Progetti */
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.project {
  display: block; padding: 16px 16px 15px;
  text-decoration: none; color: inherit;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.project::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7;
}
.project[data-type="node"] { --accent: var(--blue); }
.project[data-type="php"] { --accent: var(--violet); }
.project[data-type="static"] { --accent: var(--orange); }
@media (hover: hover) {
  .project:not(.p-hero):hover { transform: translateY(-3px); border-color: rgba(255,255,255,.14); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.project:active { border-color: rgba(255,255,255,.16); }
.p-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p-name { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-when { font-size: 12px; color: var(--faint); white-space: nowrap; flex: none; }
.p-link {
  display: inline-block; max-width: 100%;
  font-size: 12.5px; color: var(--accent); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;
  margin-top: 2px; padding: 2px 0;
}
.p-link:hover { text-decoration: underline; }
.p-summary {
  margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.p-summary.empty { color: var(--faint); font-style: italic; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badges:empty { display: none; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 11px; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c, var(--blue)) 40%, transparent);
  color: var(--c, var(--blue));
  background: color-mix(in srgb, var(--c, var(--blue)) 8%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge.dirty { --c: var(--yellow); }
.badge.job { --c: var(--green); }
.badge.job.queued { --c: var(--violet); }
.badge .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Pagina progetto */
.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-size: 14px; color: var(--muted); text-decoration: none;
}
.back:hover { color: var(--white); }
.p-hero { padding: 18px 16px; margin-top: 4px; }
.p-hero h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.p-hero .p-summary { -webkit-line-clamp: 6; }

.ask { display: flex; gap: 10px; align-items: flex-end; padding: 12px; margin-top: 12px; }
.ask .mascot { width: 44px; height: 44px; flex: none; align-self: center; }
.ask textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 44px; max-height: 40vh;
  padding: 11px 12px; font-size: 16px; line-height: 1.4;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  outline: none; transition: border-color .2s;
}
.ask textarea:focus { border-color: var(--violet); }
.ask textarea::placeholder { color: var(--faint); }
.btn {
  flex: none; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  color: #fff; font-size: 14px; font-weight: 700;
  transition: opacity .18s;
}
.btn:disabled { opacity: .5; cursor: default; }

.jobs { display: flex; flex-direction: column; }
.jobrow { display: block; padding: 12px 14px; text-decoration: none; }
.jobrow + .jobrow { border-top: 1px solid rgba(255,255,255,.05); }
.jobrow:active { background: rgba(255,255,255,.04); }
.jobrow .j-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jobrow .j-prompt { font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.jobrow .j-summary { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jobrow .j-when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.pill {
  font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  --c: var(--muted);
}
.pill.s-done { --c: var(--green); }
.pill.s-failed, .pill.s-blocked, .pill.s-interrupted { --c: var(--red); }
.pill.s-running, .pill.s-verifying, .pill.s-publishing { --c: var(--blue); }
.pill.s-awaiting_confirm, .pill.s-paused_limit { --c: var(--yellow); }
.pill.s-queued { --c: var(--violet); }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px 22px; color: var(--muted); font-size: 14px; }
.empty-state .mascot { width: 96px; height: 96px; }

.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Notifiche */
.top h1 .count {
  display: inline-block; vertical-align: super; margin-left: 6px;
  min-width: 18px; padding: 1px 6px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center;
  background: var(--orange); color: #1a0f05; -webkit-text-fill-color: #1a0f05;
}
.notes .dot { flex: none; }

/* Pagina lavoro */
.job-top { padding-bottom: 12px; }
.j-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 20px; }
.j-title strong { font-weight: 600; }
.j-prompt-card, .outcome { padding: 12px 14px; margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.c-label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.outcome.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.o-error { color: var(--red); margin-bottom: 6px; }

.confirm { padding: 16px; margin-top: 12px; border-color: color-mix(in srgb, var(--yellow) 45%, transparent); box-shadow: 0 0 40px -16px rgba(250,204,21,.35); }
.confirm h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.confirm .c-summary { font-size: 14px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; }
.reasons { margin: 2px 0 4px 18px; font-size: 13.5px; }
.reasons li + li { margin-top: 2px; }
.c-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.c-actions .btn { flex: 1; max-width: 200px; }
.c-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.btn.ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--white); }

.chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 60px; }
.chat:empty::before { content: 'Ancora nessun messaggio.'; color: var(--faint); font-size: 13px; }
.msg { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 11px; border-radius: 12px; max-width: 92%; }
.msg.claude { background: rgba(255,255,255,.05); align-self: flex-start; }
.msg.dan { background: color-mix(in srgb, var(--violet) 22%, transparent); align-self: flex-end; }
.msg.note { align-self: center; font-size: 12.5px; color: var(--muted); background: none; padding: 2px 6px; }
.msg.tool { align-self: flex-start; font-size: 12px; color: var(--faint); padding: 0 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.msg.tool b { color: var(--muted); font-weight: 600; }
.chat-status { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; text-align: center; }

.evidence { display: flex; flex-direction: column; }
.ev { padding: 10px 14px; }
.ev + .ev { border-top: 1px solid rgba(255,255,255,.05); }
.ev-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ev-head .dot { flex: none; }
.ev-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-detail { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shot { display: block; margin-top: 8px; }
.shot img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); }
details > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; overflow-x: auto; white-space: pre; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: rgba(0,0,0,.35); }

.diff details { padding: 0 14px; }
.diff details + details { border-top: 1px solid rgba(255,255,255,.05); }
.diff summary { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 13.5px; color: var(--white); list-style: none; }
.diff summary::-webkit-details-marker { display: none; }
.diff summary::before { content: '▸'; color: var(--faint); font-size: 11px; }
.diff details[open] summary::before { content: '▾'; }
.f-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.f-stat { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.add { color: var(--green); }
.del { color: var(--red); }
.patch { margin: 0 0 12px; }
.patch .hunk { color: var(--blue); }
.f-empty { font-size: 12.5px; color: var(--faint); padding: 0 0 10px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 10;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 12px; font-size: 14px;
  background: rgba(20,16,40,.96); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}