/* ============================================================
   TiraVoz Studio — Camada Premium & Mobile (add-on)
   Carregado depois de style-studio.css para vencer na cascata.
   ============================================================ */

/* ---------- Tokens extras ---------- */
:root {
  --glass: rgba(20,20,32,0.55);
  --glass-brd: rgba(255,255,255,0.08);
  --shadow-soft: 0 18px 50px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(124,58,237,0.25), 0 20px 60px rgba(124,58,237,0.18);
}

/* ---------- Fundo cinematográfico animado ---------- */
body {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(6,182,212,0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at 10% 110%, rgba(168,85,247,0.14), transparent 60%) !important;
  background-attachment: fixed !important;
}

/* ---------- Glassmorphism nos cards ---------- */
.stat-card, .proc-panel, .s-card, .credit-plan,
.project-card, .mixer-container {
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--shadow-soft);
}

/* Brilho de topo (linha de luz) nos cards principais */
.stat-card::after, .credit-plan::after, .proc-panel::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  opacity: .6; pointer-events: none;
}

/* ---------- Transições/feedback de toque ---------- */
.sidebar-item, .stat-card, .credit-plan, .project-card,
.btn-primary, .btn-secondary, .proc-remove, .mixer-play-btn,
.studio-upload, .mixer-btn {
  transition: transform .2s cubic-bezier(.16,1,.3,1),
              box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.sidebar-item:active, .btn-primary:active, .btn-secondary:active,
.credit-plan:active, .mixer-play-btn:active, .mixer-btn:active,
.studio-upload:active { transform: scale(.965); }

/* Sem realce azul de toque */
.sidebar-item, .btn-primary, .btn-secondary, .credit-plan, .mixer-play-btn,
.mixer-fader-wrap, .mixer-pan, .studio-upload, .proc-remove,
.topbar-credits, .topbar-avatar, .mixer-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- Stat cards premium ---------- */
.stat-card { overflow: hidden; }
.stat-card::before {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.22), transparent 70%);
  pointer-events: none;
}
.stat-card:hover { transform: translateY(-4px); border-color: var(--border-hover) !important; }
.stat-card-value {
  background: linear-gradient(120deg, #fff, var(--a3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card-value.gold { background: linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-card-value.green { background: linear-gradient(120deg,#fff,var(--ok)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- Botão primário com brilho deslizante ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:hover { box-shadow: 0 14px 40px rgba(124,58,237,0.45); }

/* ---------- Upload zone premium ---------- */
.studio-upload {
  border: 1.5px dashed rgba(255,255,255,0.14) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124,58,237,0.08), transparent 70%),
    rgba(255,255,255,0.015) !important;
}
.studio-upload:hover {
  border-color: var(--a3) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(6,182,212,0.12), transparent 70%),
    rgba(6,182,212,0.04) !important;
  box-shadow: 0 0 0 1px rgba(6,182,212,0.25), 0 20px 50px rgba(6,182,212,0.12);
}
.studio-upload-icon { animation: floaty 3.5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---------- Sidebar item ativo com glow ---------- */
.sidebar-item.active {
  box-shadow: inset 0 0 0 1px rgba(124,58,237,0.25), 0 8px 24px rgba(124,58,237,0.12);
}

/* ---------- Planos de crédito premium ---------- */
.credit-plan.popular {
  box-shadow: 0 0 0 1px var(--a3), 0 24px 60px rgba(6,182,212,0.18) !important;
}
.credit-plan:hover { box-shadow: 0 22px 55px rgba(124,58,237,0.22) !important; }
.credit-plan-price {
  background: linear-gradient(120deg, #fff, var(--cyan2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Mixer premium ---------- */
.mixer-channel {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.25)) !important;
  border: 1px solid var(--glass-brd) !important;
  transition: transform .2s ease, box-shadow .28s ease, border-color .28s ease;
}
.mixer-channel:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.14) !important; }
.mixer-ch-label { text-shadow: 0 0 12px currentColor; }

.mixer-fader-wrap {
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}
.mixer-fader-fill { box-shadow: 0 0 14px currentColor; filter: saturate(1.2); }
.mixer-fader-thumb {
  border: 2px solid rgba(0,0,0,0.6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 12px rgba(255,255,255,0.5) !important;
}
.mixer-play-btn { box-shadow: 0 10px 30px rgba(124,58,237,0.4); }
.mixer-play-btn:hover { transform: scale(1.08); box-shadow: 0 14px 38px rgba(124,58,237,0.6); }
.mixer-playhead { box-shadow: 0 0 14px var(--cyan2), 0 0 4px #fff; }

/* Seek/slider premium */
.mixer-seek::-webkit-slider-thumb { box-shadow: 0 0 12px var(--cyan2), 0 0 0 4px rgba(34,211,238,0.18); }

/* ---------- Toast premium ---------- */
.s-toast {
  background: rgba(16,16,26,0.9) !important;
  border: 1px solid var(--glass-brd) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.s-toast.ok { box-shadow: 0 20px 50px rgba(16,185,129,0.18); }
.s-toast.er { box-shadow: 0 20px 50px rgba(239,68,68,0.18); }

/* ---------- Avatar premium ---------- */
.topbar-avatar { box-shadow: 0 6px 18px rgba(124,58,237,0.4); }

/* ---------- Scrollbars ---------- */
.workspace::-webkit-scrollbar, .mixer-channels::-webkit-scrollbar { width: 8px; height: 8px; }
.workspace::-webkit-scrollbar-thumb, .mixer-channels::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#7c3aed,#06b6d4); border-radius: 10px;
}

/* ============================================================
   MOBILE — layout do estúdio (≤ 860px)
   ============================================================ */
@media (max-width: 860px) {
  .studio-layout { display: block !important; }

  .topbar {
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 120 !important;
    height: calc(56px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 14px 0 14px !important;
    display: flex !important; align-items: center; justify-content: space-between;
    background: rgba(8,8,15,0.92) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .topbar-logo span { font-size: 1rem !important; }

  .sidebar {
    position: fixed !important; inset: auto 0 0 0 !important; top: auto !important;
    width: 100% !important; height: auto !important;
    flex-direction: row !important; display: flex !important;
    align-items: center; justify-content: flex-start; gap: 2px !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) 8px !important;
    margin: 0 !important;
    background: rgba(10,10,18,0.94) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; z-index: 120 !important;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-section { display: contents !important; }
  .sidebar-label, .sidebar-tag { display: none !important; }

  .sidebar-item {
    flex: 0 0 auto !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important; min-width: 60px; padding: 7px 6px !important; margin: 0 !important;
    font-size: 0.6rem !important; line-height: 1.1 !important; text-align: center;
    border-radius: 14px !important; white-space: nowrap;
  }
  .sidebar-item svg { width: 21px !important; height: 21px !important; flex: 0 0 auto; }
  .sidebar-item.active::before { display: none !important; }
  .sidebar-item.active {
    background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(6,182,212,.2)) !important;
    color: #fff !important;
  }

  .workspace {
    position: static !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; height: auto !important; min-height: 100vh;
    padding: calc(70px + env(safe-area-inset-top)) 14px
             calc(86px + env(safe-area-inset-bottom)) 14px !important;
    overflow: visible !important;
  }

  .ws-title { font-size: 1.4rem !important; }
  .ws-subtitle { font-size: 0.88rem !important; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card-value { font-size: 1.5rem !important; }
  .credits-plans { grid-template-columns: 1fr !important; gap: 12px !important; }
  .projects-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .studio-upload { padding: 34px 16px !important; }
  .proc-panel, .s-card { padding: 16px !important; border-radius: 16px !important; }

  .mixer-channels { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .mixer-channel { padding: 14px 10px !important; width: auto !important; }
  .mixer-fader-wrap { height: 130px !important; }
  .mixer-transport { gap: 10px !important; }
  .mixer-timeline { height: 70px !important; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .projects-grid { grid-template-columns: 1fr !important; }
  .mixer-channels { grid-template-columns: 1fr !important; }
  .sidebar-item { min-width: 56px; }
}

/* Acessibilidade: respeitar quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Stem preview chips (Multi-Stem) ===== */
.stem-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stem-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stem-chip span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.stem-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 40%, transparent);
}
@media (max-width: 520px) {
  .stem-preview-grid { grid-template-columns: repeat(2, 1fr); }
}