/* USER */
#screen-user{background:linear-gradient(160deg,#ecfdf5,#eff6ff 55%,#fef9ee);}
.user-hero{padding:17px 16px 10px;text-align:center;}
.user-avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--grass-light),var(--ocean-mid));margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--shadow);}
.user-hero h1{font-family:'Baloo 2',sans-serif;font-size:20px;font-weight:800;}
.user-hero p{font-size:11px;color:var(--text-soft);font-weight:600;margin-top:2px;}
.tabs{display:flex;gap:6px;padding:0 16px 11px;justify-content:center;}
.tab-btn{padding:7px 16px;border-radius:40px;font:800 12px 'Nunito',sans-serif;border:2.5px solid transparent;cursor:pointer;transition:all .2s;}
.tab-games{background:var(--grass-pale);color:var(--grass);border-color:var(--grass);}
.tab-voice{background:var(--ocean-pale);color:var(--ocean);border-color:var(--ocean);}
.tab-games.active{background:var(--grass);color:var(--white);}
.tab-voice.active{background:var(--ocean);color:var(--white);}

/* GAMES GRID */
#panel-games{padding:0 16px 40px;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;max-width:760px;margin:0 auto;}
.game-tile{background:var(--white);border-radius:var(--r);padding:13px 6px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);border:2px solid var(--border);transition:transform .2s,box-shadow .2s;}
.game-tile:hover{transform:translateY(-4px) rotate(.6deg);box-shadow:var(--shadow);}
.gi{font-size:31px;display:block;margin-bottom:4px;}
.gn{font-size:10px;font-weight:800;color:var(--text);line-height:1.3;}

/* VOICE PANEL */
#panel-voice{padding:0 16px 60px;display:flex;flex-direction:column;gap:13px;max-width:760px;margin:0 auto;width:100%;}
.predict-banner{border-radius:var(--r);padding:13px 15px;background:linear-gradient(120deg,var(--ocean),var(--violet));color:var(--white);display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);}
.pb-icon{font-size:26px;flex-shrink:0;}
.pb-body{flex:1;}
.pb-label{font-size:9px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.8px;}
.pb-msg{font-size:14px;font-weight:800;margin-top:2px;line-height:1.3;}
.pb-confirm{background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.45);color:var(--white);border-radius:10px;padding:6px 11px;font:800 11px 'Nunito',sans-serif;cursor:pointer;flex-shrink:0;}
.section-label{font-size:10px;font-weight:800;color:var(--text-soft);text-transform:uppercase;letter-spacing:.9px;}
.trig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.trig{padding:10px 3px;border-radius:13px;border:none;cursor:pointer;font:800 9px 'Nunito',sans-serif;display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .15s;box-shadow:var(--shadow-sm);}
.trig:hover{transform:scale(1.07);}
.trig-icon{font-size:19px;}

/* AI BUILDER */
.ai-builder{background:var(--white);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow);}
.ai-builder-title{font-size:16px;font-weight:800;margin-bottom:2px;}
.ai-builder-sub{font-size:11px;color:var(--text-soft);font-weight:600;margin-bottom:13px;}
.row-label{font-size:9px;font-weight:800;color:var(--text-soft);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;}
.chips-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
.chip{padding:5px 10px;border-radius:24px;border:2px solid var(--border);background:var(--bg);color:var(--text-soft);cursor:pointer;font:700 10px 'Nunito',sans-serif;transition:all .15s;}
.chip:hover{border-color:var(--ocean-light);}
.chip.st{border-color:var(--ocean);background:var(--ocean-pale);color:var(--ocean);}       /* time */
.chip.so{border-color:var(--coral);background:var(--coral-pale);color:var(--coral);}       /* obj */
.chip.se{border-color:var(--violet);background:var(--violet-pale);color:var(--violet);}    /* emo */
.chip.sp{border-color:var(--grass);background:var(--grass-pale);color:var(--grass);}       /* place */
.chip.sw{border-color:var(--teal);background:var(--teal-pale);color:var(--teal);}          /* who */
.chip.sev{border-color:var(--sun);background:var(--sun-pale);color:var(--coral);}          /* event */
.chip.sbo{border-color:var(--rose);background:var(--rose-pale);color:var(--rose);}         /* body */
.chip.sel{border-color:var(--violet);background:var(--violet-pale);color:var(--violet);}   /* fallback */
.gen-btn{width:100%;padding:13px;border-radius:var(--r);border:none;cursor:pointer;font:800 13px 'Nunito',sans-serif;color:var(--white);background:linear-gradient(120deg,var(--ocean),var(--violet));box-shadow:0 4px 14px rgba(37,99,235,.25);transition:opacity .15s,transform .15s;margin-top:3px;}
.gen-btn:hover:not(:disabled){opacity:.91;transform:translateY(-2px);}
.gen-btn:disabled{opacity:.5;cursor:default;}
.ai-output{margin-top:11px;border-radius:var(--r);padding:12px;background:var(--bg);border-left:4px solid var(--ocean);display:none;animation:fadeUp .4s;}
.ai-output.show{display:block;}
.ai-out-label{font-size:9px;font-weight:800;color:var(--ocean);text-transform:uppercase;letter-spacing:.9px;margin-bottom:6px;}
.ai-out-text{font-size:16px;font-weight:700;line-height:1.55;}
.ai-out-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.out-btn{padding:5px 10px;border-radius:13px;border:2px solid var(--border);background:var(--white);cursor:pointer;font:700 10px 'Nunito',sans-serif;color:var(--text);transition:all .15s;}
.out-btn:hover{border-color:var(--ocean);color:var(--ocean);}
.ai-thinking{display:none;align-items:center;gap:8px;padding:9px 0;}
.ai-thinking.show{display:flex;}
.dot-anim{display:flex;gap:3px;}
.dot-anim span{width:7px;height:7px;border-radius:50%;background:var(--ocean);animation:dotB 1.2s ease-in-out infinite;}
.dot-anim span:nth-child(2){animation-delay:.2s;}
.dot-anim span:nth-child(3){animation-delay:.4s;}
@keyframes dotB{0%,80%,100%{transform:translateY(0);opacity:.5;}40%{transform:translateY(-7px);opacity:1;}}


/* ══════════════ COMUNICAZIONE RAPIDA ══════════════ */
.comm-section {
  background: var(--white);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 16px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.comm-section-title {
  font: 800 14px 'Nunito', sans-serif;
  color: var(--text-main);
  margin-bottom: 2px;
}
.comm-section-sub {
  font: 600 10px 'Nunito', sans-serif;
  color: var(--text-soft);
  margin-bottom: 12px;
}

/* Categorie */
.comm-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.comm-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.comm-cat:active, .comm-cat.active {
  border-color: var(--violet);
  background: var(--violet-pale);
  transform: scale(0.96);
}
.cc-icon { font-size: 28px; line-height: 1; }
.cc-label { font: 700 10px 'Nunito', sans-serif; color: var(--text-main); text-align: center; }

/* Items */
.comm-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  animation: fadeIn .2s ease;
}
.comm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.comm-item:active, .comm-item.active {
  border-color: var(--grass);
  background: var(--grass-pale);
  transform: scale(0.96);
}
.ci-icon  { font-size: 32px; line-height: 1; }
.ci-label { font: 700 11px 'Nunito', sans-serif; color: var(--text-main); text-align: center; }

/* Frase costruita */
.comm-phrase {
  background: linear-gradient(135deg, var(--violet-pale), var(--ocean-pale));
  border: 2px solid var(--violet);
  border-radius: 14px;
  padding: 14px;
  animation: fadeIn .2s ease;
}
.cp-text {
  font: 800 18px 'Nunito', sans-serif;
  color: var(--violet);
  text-align: center;
  margin-bottom: 12px;
}
.cp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-btn {
  flex: 1;
  min-width: 80px;
  padding: 10px 8px;
  border-radius: 10px;
  border: none;
  font: 700 11px 'Nunito', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.cp-speak { background: var(--ocean-pale); color: var(--ocean); border: 2px solid var(--ocean); }
.cp-send  { background: var(--grass); color: #fff; }
.cp-reset { background: var(--bg); color: var(--text-soft); border: 2px solid var(--border); }
.cp-btn:active { transform: scale(0.96); }

/* Animazione notifica caregiver */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Bottone "Invia al caregiver" nell'inline AI builder */
.out-btn-send {
  background: var(--grass) !important;
  color: #fff !important;
  font-weight: 800;
}