/* ClaudeCare.exe — styles on the Lab shell. Accent: Claude clay #d97757.
   Mascote SVG desenhado à mão (homenagem original), carinhas por data-mood. */

:root { --accent: #d97757; }

/* paleta do mascote */
.cc-stage { --cc-body: #d97757; --cc-outline: #f5f0eb; --cc-face: #1c1917; }

.cc-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.cc-intro__title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; }
.cc-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.cc-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

.cc-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 240px; border: 1px solid rgba(217,119,87,.25); border-radius: 12px;
  background: radial-gradient(420px 180px at 50% 22%, rgba(217,119,87,.10), transparent 70%), #0b1220; }
.cc-bubble { font: 600 .85rem ui-monospace, monospace; color: #f2d9cd; background: rgba(217,119,87,.12);
  border: 1px solid rgba(217,119,87,.4); border-radius: 12px; padding: .35rem .8rem; margin-bottom: .4rem;
  max-width: 90%; text-align: center; }

/* ---- mascote SVG ---- */
.cc-mascot { width: clamp(180px, 42vw, 240px); }
.cc-svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.cc-body { fill: var(--cc-body); stroke: var(--cc-outline); stroke-width: 4; }
.cc-part { fill: var(--cc-body); stroke: var(--cc-outline); stroke-width: 3; }
.cc-eye { fill: var(--cc-face); }
.cc-eye-o { fill: none; stroke: var(--cc-face); stroke-width: 4; }
.cc-stroke { fill: none; stroke: var(--cc-face); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* carinhas: só a do humor atual aparece */
.cc-face { display: none; }
.cc-stage[data-mood="neutral"] .cc-face--neutral,
.cc-stage[data-mood="happy"]   .cc-face--happy,
.cc-stage[data-mood="sleep"]   .cc-face--sleep,
.cc-stage[data-mood="hungry"]  .cc-face--hungry,
.cc-stage[data-mood="drama"]   .cc-face--drama,
.cc-stage[data-mood="monday"]  .cc-face--monday,
.cc-stage[data-mood="friday"]  .cc-face--friday { display: block; }
/* café/carinho: sempre mostra carinha feliz durante o react */
.cc-stage[data-react="happy"] .cc-face { display: none; }
.cc-stage[data-react="happy"] .cc-face--happy { display: block; }

/* zzz + sparkle: só quando fazem sentido */
.cc-zzz { fill: var(--cc-outline); font: 700 14px ui-monospace, monospace; opacity: 0; }
.cc-stage[data-mood="sleep"] .cc-zzz { opacity: .85; }
.cc-spark { fill: #fbbf24; opacity: 0; }
.cc-stage[data-react="happy"] .cc-spark { opacity: 1; }

/* ---- animações (gated por reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  .cc-svg { animation: cc-bob 3.2s ease-in-out infinite; }
  .cc-stage[data-mood="sleep"] .cc-svg { animation: cc-bob 5.5s ease-in-out infinite; }
  .cc-stage[data-mood="drama"] .cc-svg { animation: cc-wobble 1.4s ease-in-out infinite; }
  .cc-stage[data-mood="neutral"] .cc-face--neutral .cc-eye { animation: cc-blink 4.2s infinite; transform-origin: center; }
  .cc-stage[data-react="eat"] .cc-body { animation: cc-munch .5s ease; }
  .cc-stage[data-react="happy"] .cc-svg { animation: cc-hop .5s ease; }
  .cc-stage[data-react="happy"] .cc-spark { animation: cc-pop .6s ease; }
  .cc-stage[data-mood="sleep"] .cc-zzz { animation: cc-float 2.4s ease-in-out infinite; }
}
@keyframes cc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cc-wobble { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes cc-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes cc-munch { 0%,100% { transform: scaleY(1); } 40% { transform: scaleY(.9) translateY(4px); } }
@keyframes cc-hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes cc-pop { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1); } }
@keyframes cc-float { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }

.cc-mood { text-align: center; margin: .8rem 0 .7rem; font-size: .9rem; color: var(--text-muted, #94a3b8); }
.cc-mood b { color: var(--accent); }

.cc-bars { display: flex; gap: 1.4rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 1rem;
  font: 600 .78rem ui-monospace, monospace; color: var(--text-muted, #94a3b8); }
.cc-bars span:not(.cc-pedido) { display: inline-flex; align-items: center; gap: .45rem; }
.cc-bar { display: inline-flex; }
.cc-track { display: inline-block; width: 92px; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2, #243349); border: 1px solid var(--border, rgba(255,255,255,.12)); }
.cc-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.cc-pedido { flex-basis: 100%; text-align: center; margin-top: .1rem; }
.cc-pedido.is-done { color: var(--accent); }

.cc-actions { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.cc-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; cursor: pointer;
  border-radius: 999px; padding: .5rem 1.05rem; font: 700 .9rem 'Inter', sans-serif;
  border: 1px solid var(--border, rgba(255,255,255,.14)); background: var(--surface-2, #243349);
  color: var(--text-main, #f8fafc); transition: border-color .15s, background .15s, transform .08s; }
.cc-btn:hover:not(:disabled) { border-color: var(--accent); }
.cc-btn:active { transform: scale(.96); }
.cc-btn:disabled { opacity: .45; cursor: not-allowed; }
.cc-btn--share { border-color: rgba(217,119,87,.5); color: #f2d9cd; }

.cc-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 50;
  font: 700 .8rem ui-monospace, monospace; background: var(--bg-card, #1e293b);
  border: 1px solid rgba(217,119,87,.5); border-radius: 999px; padding: .5rem 1.1rem;
  color: var(--text-main, #f8fafc); box-shadow: 0 10px 30px -12px rgba(2,6,23,.6);
  max-width: min(92vw, 520px); text-align: center; }