/* AppPiti — Styles PRO (Paleta Psiu.ai — Brasil Socialista) */

/*  Palette */

:root{
  --psiu-green: #009739;
  --psiu-yellow: #FFCC00;
  --psiu-blue:  #0033A0;
  --psiu-white: #FFFFFF;
  --psiu-red:   #DA291C;
  --bg-dark:    #07102a;
  --card-bg:    rgba(255,255,255,0.03);
  --glass:      rgba(255,255,255,0.04);
  --muted:      rgba(226,232,240,0.78);
  --trans-quick: 180ms;
}

/* Global */

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  padding:20px;
  background: linear-gradient(180deg,var(--bg-dark), #071733 120%);
  color:var(--psiu-white);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Container / Panel */

.appiti-panel{
  margin: 18px auto;
  max-width: 980px;
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap:18px;
  padding:18px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

/* Left column */

.appiti-left{display:flex;flex-direction:column;gap:12px;align-items:stretch}

.categories h2{margin:0;font-size:1rem;color:var(--psiu-yellow);letter-spacing:0.2px}

.cat-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  align-items:center;
  max-width:100%;
  overflow:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}

/* Category buttons */

.cat-btn{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color:var(--psiu-white);
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition: transform var(--trans-quick), box-shadow var(--trans-quick), background var(--trans-quick);
  white-space:nowrap;
}

/* Default subtle hover */

.cat-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

/* Selected / active category — DESTAQUE LUMINOSO */

.cat-btn.active{
  background: linear-gradient(90deg, var(--psiu-yellow), #FFF6CF);
  color: var(--psiu-blue);
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  transform: translateY(-4px) scale(1.02);
}

/* Special colored variants (optional look) */

.cat-btn.variant-green.active{ background: linear-gradient(90deg,var(--psiu-green), #3fe173); color:#042b12; }

.cat-btn.variant-blue.active{ background: linear-gradient(90deg,var(--psiu-blue), #234dbb); color:var(--psiu-white); }

.cat-btn.variant-red.active{ background: linear-gradient(90deg,var(--psiu-red), #ff6a5e); color:var(--psiu-white); }

/* Controls */

.controls{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:none;
  background:var(--glass);
  color:var(--psiu-white);
  cursor:pointer;
  font-weight:700;
  transition: transform var(--trans-quick), opacity var(--trans-quick);
}

.btn:hover{ transform: translateY(-3px); opacity:0.98}

.btn-primary{ background: linear-gradient(90deg,var(--psiu-green), #1fd06a); color:#042610; box-shadow:0 8px 20px rgba(5,120,55,0.12); }

.btn-outline{ border:1px solid rgba(255,255,255,0.06); background:transparent; }

.btn-small{ padding:6px 8px; font-size:0.9rem; border-radius:8px; }

/* Right column */

.appiti-right{display:flex;flex-direction:column;gap:12px}

.suggestion-card{
  padding:18px;
  border-radius:12px;
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,0.03);
  min-height:100px;
}

.suggestion-card h3{margin:0;font-size:1.4rem;color:var(--psiu-white)}

.muted{opacity:0.85;color:var(--muted)}

.notes{margin-top:8px;color:var(--muted);font-size:0.95rem}

.meta{margin-top:12px;display:flex;gap:10px;align-items:center}

/* Tag */

.tag{
  background:transparent;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.04);
  font-weight:700;
  color:var(--psiu-white);
}

/* History & favorites */

.history{margin-top:12px}

.history ul, .favorites ul{list-style:none;padding:0;margin:0}

.history li, .favorites li{
  padding:8px 10px;
  border-radius:8px;
  margin-bottom:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.02);
  color:var(--psiu-white);
}

/* Favorites panel */

.favorites{padding:10px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border-radius:10px}

/* Small screens adjustments */

@media (max-width:880px){
  .appiti-panel{ grid-template-columns: 1fr; padding:14px; gap:12px; margin:12px; }
  .appiti-left{order:2}
  .appiti-right{order:1}
  .suggestion-card{min-height:120px}
  .cat-list{gap:6px}
  .cat-btn{padding:8px 10px;font-size:0.92rem}
}

/* Very small phones */

@media (max-width:420px){
  body{padding:12px}
  .appiti-panel{padding:12px;border-radius:10px}
  .cat-list{gap:6px}
  .cat-btn{padding:7px 10px;font-size:0.9rem}
  .suggestion-card{padding:12px}
}

/* Accessibility focus */

.cat-btn:focus, .btn:focus { outline: 3px solid rgba(255,255,255,0.06); outline-offset:2px; }

/* Utility */

.hidden{display:none}

/* --- Performer Mode & layout fixes (append) --- */

/* Fix: spacing between "Escolha a vibe" and the buttons + better wrap */

.categories {
  padding-bottom: 10px; /* evita que as buttons colem no título */
}

.categories h2 {
  margin: 0 0 8px 0; /* força um gap consistente */
  display: block;
}

/* mais espaço para a lista e scroll suave em telas pequenas */

.cat-list {
  margin-top: 10px; /* aumenta o espaço entre título e botões */
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

/* garante que o conteúdo não sobreponha o título em layouts estranhos */

.appiti-left {
  min-height: 80px;
}

/* ajuste visual para múltiplas seleções (leve) */

.cat-btn.multi-selected {
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(-3px) scale(1.01);
}

/* melhora a rolagem horizontal no celular (se necessário) */

.cat-list::-webkit-scrollbar { height: 8px; }

.cat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }

/* --- Performer Mode (compact UI) --- */

.performer-mode .appiti-panel {
  max-width: 900px;
  padding: 12px;
  grid-template-columns: 1fr; /* single column in performer */
}

.performer-mode .appiti-left { display: none; } /* esconde categorias/histórico para foco */

.performer-mode .appiti-right { order: 1; }

.performer-mode .suggestion-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:160px;
  padding:20px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* compact title + artist */

.performer-mode .suggestion-card h3 {
  font-size:1.8rem;
  margin:0 0 6px 0;
  text-align:center;
}

.performer-mode .suggestion-card .muted {
  font-size:1rem;
  opacity:0.9;
  margin-bottom:6px;
}

/* meta hidden by default, shows only small tag */

.performer-mode .suggestion-card .notes,
.performer-mode .suggestion-card .meta { display:none; }

/* big NEXT button for performer */

.performer-mode .controls { justify-content:center; gap:10px; margin-top:12px; }

.performer-mode #btn-next {
  padding:14px 20px;
  font-size:1.15rem;
  border-radius:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* "Mostrar mais" tiny link */

.performer-more {
  margin-top:10px;
  font-size:0.95rem;
  color:var(--psiu-yellow);
  cursor:pointer;
  opacity:0.95;
}

.performer-more:hover { text-decoration:underline; opacity:1; }

/* when expanded, show notes and meta */

.performer-mode.expanded .suggestion-card .notes,
.performer-mode.expanded .suggestion-card .meta { display:block; }

/* small-screen bump */

@media (max-width:420px){
  .performer-mode .suggestion-card h3 { font-size:1.4rem; }
  .performer-mode #btn-next { padding:12px 16px; font-size:1rem; }
}

/* accessibility */

.cat-btn:focus, .btn:focus { outline: 3px solid rgba(255,255,255,0.06); outline-offset:2px; }

/* utility */

.hidden{display:none}