/* Civitas Nexus AI CRM V1.4 · Uffici vivi: personaggi guidati da js/life.js
 * Le classi di stato (.is-walk, .is-type, …) sono applicate dal motore JS e corrispondono 1:1 alle regole qui sotto.
 */
/* Le sale seguono la palette scelta (in V1.3 i colori erano fissi) */
.live-room[data-office='direzione'],.live-room[data-office='sicurezza']{--room-accent:var(--blue)}
.live-room[data-office='commerciale'],.live-room[data-office='amministrazione']{--room-accent:var(--green)}
.live-room[data-office='marketing'],.live-room[data-office='crm']{--room-accent:var(--cyan)}
.room-sign{border-color:var(--room-accent)}
.room-floor{border-top-color:var(--room-accent)}
.staff-toolbar .btn{min-height:35px}

/* Arredi aggiuntivi */
.room-rug{position:absolute;left:31%;width:30%;bottom:22px;height:58px;border-radius:50%;z-index:2;background:radial-gradient(ellipse,rgba(255,255,255,.07),transparent 70%);border:1px solid rgba(120,210,255,.14);transform:skewX(-8deg)}
.room-door{position:absolute;left:28%;width:44%;bottom:6px;height:58%;border:2px solid rgba(120,200,240,.35);border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(20,70,110,.6),rgba(6,22,46,.9))}
.room-coffee{position:absolute;left:2.5%;bottom:84px;width:34px;height:52px;z-index:5;border-radius:6px 6px 3px 3px;background:linear-gradient(160deg,#3d6a8a,#132f4d);box-shadow:0 10px 16px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18)}
.room-coffee:before{content:"";position:absolute;left:7px;right:7px;top:8px;height:9px;border-radius:2px;background:#0a1d33;box-shadow:inset 0 0 6px var(--room-accent)}
.room-coffee span{position:absolute;left:11px;bottom:7px;width:12px;height:10px;border-radius:0 0 3px 3px;background:#eef9ff}
.room-coffee:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-34px;height:34px;background:linear-gradient(90deg,#2a5373,#14304d);border-radius:2px}

/* Personaggio */
.actor-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}
.actor{position:absolute;width:90px;height:140px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translateX(-50%);-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}
.actor:focus{outline:none}
.actor:focus-visible .actor-shadow{box-shadow:0 0 0 3px var(--accent),0 0 18px var(--accent)}
.actor-body{position:absolute;left:0;bottom:0;width:90px;height:140px;transform-origin:50% 100%;filter:drop-shadow(0 10px 11px rgba(0,0,0,.34)) drop-shadow(0 1px 0 rgba(255,255,255,.06));transition:filter .24s,transform .24s}
.actor-body .employee-svg{display:block;width:100%;height:100%;overflow:visible}
.actor-shadow{position:absolute;left:50%;bottom:-4px;width:52px;height:12px;margin-left:-26px;border-radius:50%;background:radial-gradient(ellipse,rgba(1,10,24,.6),transparent 70%);transition:box-shadow .2s}
.actor:hover .actor-body{filter:drop-shadow(0 12px 13px rgba(0,0,0,.38)) drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 55%,transparent));transform:translateY(-1px)}
.actor.is-selected .actor-shadow{background:radial-gradient(ellipse,var(--accent),transparent 72%);box-shadow:0 0 18px var(--accent);animation:select-pulse 1.6s ease-in-out infinite}
@keyframes select-pulse{50%{opacity:.55}}
.actor-tag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:9px;font-size:10px;font-weight:780;color:#e4f8ff;background:rgba(5,23,45,.82);border:1px solid rgba(50,185,235,.34);box-shadow:0 6px 14px rgba(1,12,29,.3);pointer-events:none;opacity:.86;transition:opacity .2s}
.actor-tag .tag-dot{background:var(--accent);box-shadow:0 0 8px var(--accent);margin-right:5px}
.actor.is-selected .actor-tag,.actor:hover .actor-tag{opacity:1;border-color:var(--accent)}
.actor-bubble{position:absolute;left:50%;transform:translate(-50%,6px) scale(.9);max-width:170px;width:max-content;padding:6px 10px;border-radius:12px;font-size:11px;font-weight:650;line-height:1.3;color:#0a2440;background:#f2fbff;box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;text-align:center}
.actor-bubble:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#f2fbff}
.actor.has-bubble .actor-bubble{opacity:1;transform:translate(-50%,0) scale(1)}

/* V3.4.2 · Cinematica SVG a due giunti: spalla e gomito indipendenti.
 * Ancore in coordinate della vista SVG 92 x 150 (evita perni mobili dovuti al bbox).
 * Per ogni movimento le durate di spalla e gomito coincidono: gesto coordinato, non robotico.
 */
.actor .employee-figure{transform-box:view-box;transform-origin:46px 134px;animation:life342-breathe 4.8s ease-in-out infinite}
.actor .employee-leg{transform-box:fill-box;transform-origin:50% 0%}
.actor .employee-arm,.actor .employee-forearm{transform-box:view-box}
.actor .employee-arm-front{transform-origin:58.2px 40.1px}
.actor .employee-arm-back{transform-origin:33.8px 40px}
.actor .employee-forearm-front{transform-origin:62px 58px}
.actor .employee-forearm-back{transform-origin:30.9px 58.2px}
.actor .employee-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:life-blink 4.6s infinite}
.actor .employee-mouth{transform-box:fill-box;transform-origin:50% 50%}
.employee-tablet,.employee-cup{display:none}
.actor.is-present .employee-tablet,.actor.is-meeting .employee-tablet{display:inline}
.actor.is-coffee .employee-cup{display:inline}
@keyframes life342-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.65px) scale(1.004)}}
@keyframes life-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}

/* Camminata meno ampia: opposti braccio/gamba, passo simmetrico */
.actor.is-walk .employee-figure{animation:life342-step .62s ease-in-out infinite}
.actor.is-walk .employee-leg-front{animation:life342-leg-front .62s ease-in-out infinite alternate}
.actor.is-walk .employee-leg-back{animation:life342-leg-back .62s ease-in-out infinite alternate}
.actor.is-walk .employee-arm-front{animation:life342-walk-front .62s ease-in-out infinite alternate}
.actor.is-walk .employee-arm-back{animation:life342-walk-back .62s ease-in-out infinite alternate}
.actor.is-walk .employee-forearm-front{animation:life342-walk-elbow-front .62s ease-in-out infinite alternate}
.actor.is-walk .employee-forearm-back{animation:life342-walk-elbow-back .62s ease-in-out infinite alternate}
@keyframes life342-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes life342-leg-front{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes life342-leg-back{from{transform:rotate(18deg)}to{transform:rotate(-16deg)}}
@keyframes life342-walk-front{from{transform:rotate(12deg)}to{transform:rotate(-13deg)}}
@keyframes life342-walk-back{from{transform:rotate(-13deg)}to{transform:rotate(12deg)}}
@keyframes life342-walk-elbow-front{from{transform:rotate(5deg)}to{transform:rotate(11deg)}}
@keyframes life342-walk-elbow-back{from{transform:rotate(-7deg)}to{transform:rotate(-11deg)}}

/* PC: gomito fisso vicino al busto, avambraccio si porta verso la tastiera. */
.actor.is-type .employee-arm-front{animation:life342-type-shoulder .8s ease-in-out infinite alternate}
.actor.is-type .employee-forearm-front{animation:life342-type-elbow .8s ease-in-out infinite alternate}
.actor.is-type .employee-arm-back{animation:life342-type-shoulder-back .95s ease-in-out infinite alternate-reverse}
.actor.is-type .employee-forearm-back{animation:life342-type-elbow-back .95s ease-in-out infinite alternate-reverse}
@keyframes life342-type-shoulder{from{transform:rotate(8deg)}to{transform:rotate(12deg)}}
@keyframes life342-type-elbow{from{transform:rotate(42deg)}to{transform:rotate(50deg)}}
@keyframes life342-type-shoulder-back{from{transform:rotate(-6deg)}to{transform:rotate(-10deg)}}
@keyframes life342-type-elbow-back{from{transform:rotate(-42deg)}to{transform:rotate(-50deg)}}

/* Lavagna: indicazione controllata, breve pausa sulla destinazione. */
.actor.is-present .employee-figure{animation:life342-present-body 3.4s ease-in-out infinite}
.actor.is-present .employee-arm-front{animation:life342-point-upper 3.4s ease-in-out infinite}
.actor.is-present .employee-forearm-front{animation:life342-point-lower 3.4s ease-in-out infinite}
@keyframes life342-present-body{0%,100%{transform:rotate(0)}39%,66%{transform:rotate(-1deg) translateY(-.5px)}}
@keyframes life342-point-upper{0%,13%,100%{transform:rotate(-5deg)}38%,67%{transform:rotate(-64deg)}83%{transform:rotate(-18deg)}}
@keyframes life342-point-lower{0%,13%,100%{transform:rotate(0)}38%,67%{transform:rotate(-20deg)}83%{transform:rotate(-10deg)}}

/* Conversazione: gesticolazione contenuta, nessun mulinello del braccio. */
.actor.is-talk .employee-figure{animation:life342-talk-body 2.3s ease-in-out infinite}
.actor.is-talk .employee-arm-front{animation:life342-talk-upper 2.3s ease-in-out infinite}
.actor.is-talk .employee-forearm-front{animation:life342-talk-lower 2.3s ease-in-out infinite}
.actor.is-talk .employee-mouth,.actor.has-bubble .employee-mouth{animation:life342-mouth .38s ease-in-out infinite alternate}
@keyframes life342-talk-body{0%,100%{transform:rotate(0)}50%{transform:rotate(.75deg)}}
@keyframes life342-talk-upper{0%,100%{transform:rotate(-5deg)}35%{transform:rotate(-22deg)}65%{transform:rotate(-11deg)}}
@keyframes life342-talk-lower{0%,100%{transform:rotate(0)}35%{transform:rotate(-46deg)}65%{transform:rotate(-29deg)}}
@keyframes life342-mouth{from{transform:scaleY(1)}to{transform:scaleY(1.5)}}

/* Saluto: piega gomito; oscillazione ridotta alla mano/avambraccio. */
.actor.is-wave .employee-figure{animation:life342-wave-body 2.1s ease-in-out infinite}
.actor.is-wave .employee-arm-front{animation:life342-wave-upper 2.1s ease-in-out infinite}
.actor.is-wave .employee-forearm-front{animation:life342-wave-lower 2.1s ease-in-out infinite}
@keyframes life342-wave-body{0%,100%{transform:rotate(0)}40%,80%{transform:rotate(-1deg) translateY(-.5px)}}
@keyframes life342-wave-upper{0%,100%{transform:rotate(-16deg)}25%,82%{transform:rotate(-88deg)}94%{transform:rotate(-46deg)}}
@keyframes life342-wave-lower{0%,100%{transform:rotate(0)}25%{transform:rotate(-48deg)}41%{transform:rotate(-65deg)}57%{transform:rotate(-47deg)}72%{transform:rotate(-65deg)}82%{transform:rotate(-49deg)}}

/* Caffè: avambraccio ruota verso il volto, senza sollevare tutta la figura. */
.actor.is-coffee .employee-arm-front{animation:life342-coffee-upper 4s ease-in-out infinite}
.actor.is-coffee .employee-forearm-front{animation:life342-coffee-lower 4s ease-in-out infinite}
@keyframes life342-coffee-upper{0%,12%,85%,100%{transform:rotate(-6deg)}39%,64%{transform:rotate(7deg)}}
@keyframes life342-coffee-lower{0%,12%,85%,100%{transform:rotate(0)}39%,64%{transform:rotate(143deg)}}

.actor.is-idle .employee-figure{animation:life342-idle 4.8s ease-in-out infinite}
@keyframes life342-idle{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.65deg)}}

/* Rispettare la scelta dell'utente di ridurre le animazioni. */
:root[data-staff-motion="off"] .actor *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.actor *{animation:none!important}}

/* Scheda del collaboratore selezionato */
.actor-inspector{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;background:linear-gradient(95deg,rgba(13,46,76,.95),rgba(8,28,52,.95));border-top:1px solid rgba(75,176,227,.26);color:#dff6ff;min-height:62px}
.actor-inspector.is-empty{justify-content:center}
.inspector-hint{font-size:12px;color:#9cc4de}
.inspector-person{display:flex;align-items:center;gap:11px;min-width:0}
.inspector-person strong{font-size:14px}
.inspector-avatar{width:46px;height:46px;border-radius:13px;overflow:hidden;display:grid;place-items:center;flex:none}
.inspector-avatar .employee-svg{width:52px;height:52px;margin-top:10px}
.inspector-role{font-size:11px;color:#9cc4de;margin-top:2px}
.inspector-live{color:var(--green);font-weight:700}
.inspector-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.inspector-actions .btn{min-height:32px}
.inspector-close{width:32px;height:32px;font-size:13px}
.live-section .team-badge{color:#eefcff}

/* Schede team cliccabili */
button.team-card{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .18s,transform .18s}
button.team-card:hover{border-color:var(--cyan);transform:translateY(-1px)}
button.team-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.team-live{color:var(--green);font-weight:650}
.team-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* Pausa / riduzione movimento */
:root[data-staff-motion="off"] .actor *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.actor *{animation:none!important}}
@media(max-width:620px){.actor-inspector{padding:11px 13px}.inspector-actions .btn{flex:1 1 auto}.actor-tag{font-size:9px}}