/* ── Menu de navegação "Professor de Memes" ───────────────────────────────
   Identidade: traço de desenho animado (contorno grosso + sombra de adesivo),
   ícones Fluent 3D, fonte Fredoka e a paleta do tema. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root { --pm-ink: #12121c; --pm-bar: #282a36; --pm-purple: #bd93f9; --pm-pink: #ff79c6; --pm-yellow: #f1fa8c;
        --pm-orange: #ffb86c; --pm-cyan: #8be9fd; --pm-text: #f8f8f2; --pm-muted: #a4a7c4; --pm-top-h: 72px; }

/* Fonte do site inteiro: arredondada e divertida (os emojis viram ícones 3D) */
* { font-family: 'Fredoka', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Noto Color Emoji'; }

/* O menu antigo saiu; o conteúdo continua respeitando a altura do topo */
.custom-navbar-wrapper, .custom-mobile-menu, #menu-toggle, .custom-hamburger { display: none !important; }

.pm-ic { width: 30px; height: 30px; object-fit: contain; transition: transform .2s; }

/* ── Topo (computador) ────────────────────────────── */
.pm-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--pm-top-h); z-index: 1000;
             display: flex; align-items: center; gap: 18px; padding: 0 22px; background: var(--pm-bar);
             border-bottom: 3px solid var(--pm-ink); box-shadow: 0 4px 0 rgba(241, 250, 140, .35); }
.pm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pm-text); flex-shrink: 0; }
.pm-brand-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--pm-yellow); border: 3px solid var(--pm-ink);
                  box-shadow: 0 4px 0 var(--pm-ink); display: flex; align-items: center; justify-content: center;
                  transform: rotate(-8deg); transition: transform .25s; }
.pm-brand:hover .pm-brand-badge { transform: rotate(8deg) scale(1.06); }
.pm-brand-badge .pm-ic { width: 34px; height: 34px; }
.pm-brand-name { font-weight: 700; font-size: 1.35rem; line-height: 1; letter-spacing: .3px; white-space: nowrap; }
.pm-brand-name span { color: var(--pm-pink); display: inline-block; transform: rotate(-3deg); }
.pm-brand-name small { display: block; font-size: .68rem; font-weight: 500; color: var(--pm-muted); letter-spacing: .5px; margin-top: 3px; }

.pm-nav { display: flex; gap: 10px; margin: 0 auto; }
.pm-nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 16px;
            color: var(--pm-text); text-decoration: none; font-weight: 600; font-size: 1rem; border: 2.5px solid transparent;
            transition: transform .15s, background .15s; white-space: nowrap; }
.pm-nav a:hover { transform: translateY(-2px) rotate(-2deg); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.pm-nav a:hover .pm-ic { transform: scale(1.15) rotate(-6deg); }
.pm-nav a.active { background: var(--pm-purple); color: var(--pm-ink); border-color: var(--pm-ink); box-shadow: 0 4px 0 var(--pm-ink); }

.pm-count { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
            background: var(--pm-pink); color: var(--pm-ink); border: 2.5px solid var(--pm-ink); font-size: .75rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center; animation: pm-pop 1.8s infinite; }
.pm-count[hidden] { display: none; }

.pm-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-chip { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px 0 6px; border-radius: 21px; text-decoration: none;
           border: 2.5px solid var(--pm-ink); box-shadow: 0 3px 0 var(--pm-ink); font-weight: 700; color: var(--pm-ink); transition: transform .15s; }
.pm-chip:hover { transform: translateY(-2px); }
.pm-chip[hidden] { display: none; }
.pm-streak { background: var(--pm-orange); }
.pm-streak.off { background: #6b6e8a; filter: grayscale(.6); }
.pm-gift { background: var(--pm-pink); padding: 0 6px; animation: pm-wiggle 2.4s infinite; }
.pm-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--pm-ink); box-shadow: 0 3px 0 var(--pm-ink);
             background: #44475a; color: var(--pm-text); font-weight: 700; cursor: pointer; overflow: hidden; padding: 0;
             outline: 3px solid var(--pm-purple); outline-offset: -6px; display: flex; align-items: center; justify-content: center; }
.pm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Menu da foto ─────────────────────────────────── */
.pm-menu { position: absolute; right: 18px; top: calc(var(--pm-top-h) + 6px); width: 270px; background: var(--pm-bar);
           border: 3px solid var(--pm-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--pm-ink); padding: 8px; z-index: 1001;
           animation: pm-drop .18s ease-out; }
.pm-menu[hidden] { display: none; }
.pm-who { padding: 8px 10px 10px; border-bottom: 2px dashed rgba(255, 255, 255, .12); margin-bottom: 6px; color: var(--pm-text); }
.pm-who b { display: block; font-weight: 600; } .pm-who small { color: var(--pm-muted); }
.pm-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--pm-text);
             text-decoration: none; font-weight: 500; transition: transform .12s, background .12s; }
.pm-menu a .pm-ic { width: 26px; height: 26px; }
.pm-menu a:hover, .pm-menu a.active { background: rgba(189, 147, 249, .15); transform: translateX(3px); }
.pm-tag { margin-left: auto; font-size: .65rem; background: var(--pm-cyan); color: var(--pm-ink); border: 2px solid var(--pm-ink);
          border-radius: 8px; padding: 0 6px; font-weight: 700; }
.pm-menu .pm-out { color: #ff6e6e; border-top: 2px dashed rgba(255, 255, 255, .12); margin-top: 6px; border-radius: 0 0 12px 12px; }

/* ── Abas de baixo (celular) ──────────────────────── */
.pm-tabbar { display: none; }
@media (max-width: 768px) {
  :root { --pm-top-h: 62px; }
  .pm-topbar { gap: 10px; padding: 0 12px; }
  .pm-nav, .pm-brand-name small, .pm-gift { display: none !important; }
  .pm-brand-badge { width: 40px; height: 40px; } .pm-brand-badge .pm-ic { width: 28px; height: 28px; }
  .pm-brand-name { font-size: 1.05rem; }
  .pm-right { margin-left: auto; }
  .pm-chip { height: 36px; } .pm-chip .pm-ic { width: 24px; height: 24px; }
  .pm-avatar { width: 38px; height: 38px; }
  .pm-menu { right: 8px; left: 8px; width: auto; }

  .pm-tabbar { position: fixed; left: 10px; right: 10px; bottom: 12px; z-index: 1000; display: grid; grid-template-columns: repeat(4, 1fr);
               background: var(--pm-bar); border: 3px solid var(--pm-ink); border-radius: 22px; box-shadow: 0 5px 0 var(--pm-ink); padding: 8px 4px 6px; }
  .pm-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--pm-muted);
                 text-decoration: none; font-weight: 600; font-size: .78rem; }
  .pm-tabbar a.active { color: var(--pm-text); }
  .pm-bubble { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: -12px;
               transition: transform .2s; }
  .pm-tabbar a.active .pm-bubble { background: var(--pm-purple); border: 2.5px solid var(--pm-ink); box-shadow: 0 3px 0 var(--pm-ink);
                                   transform: translateY(-14px) rotate(-6deg); }
  .pm-tabbar .pm-count { top: -6px; right: 14%; }

  /* Conteúdo não fica escondido atrás das abas */
  body { padding-bottom: 96px; }
  .footer { display: none !important; }
  .chat-input-container { bottom: 84px !important; }
}

/* Janelas (revisão, surpresa, histórico, doação) ficam acima do rodapé e do menu */
.modal-overlay { z-index: 10001 !important; }

/* ── Modo dev: só o admin vê as opções técnicas (GPU, provedor/modelo de IA) ── */
body:not(.pm-dev) .dev-only { display: none !important; }

@keyframes pm-wiggle { 0%, 80%, 100% { transform: rotate(0) } 84% { transform: rotate(-10deg) } 88% { transform: rotate(9deg) } 92% { transform: rotate(-6deg) } }
@keyframes pm-pop { 0%, 85%, 100% { transform: scale(1) } 92% { transform: scale(1.2) } }
@keyframes pm-drop { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .pm-gift, .pm-count { animation: none; } }