/* ================================================================
   Zyro · mobile.css  (carregue DEPOIS do style.css)
   ================================================================ */

/* botão ☰ e fundo escuro do menu: escondidos no desktop */
.hamb, .drawer-backdrop, .land-hamb { display: none; }

/* celular sem mouse: mostra o que antes só aparecia no hover */
@media (hover: none) {
  .channel-item .ch-actions { display: flex; }
  .channel-item { padding-right: 34px; }
  .category-header .cat-actions { opacity: 1; }
  .msg.show-actions .msg-hover-actions { display: flex; }
  .msg:hover .msg-hover-actions { display: none; }
  .msg.show-actions:hover .msg-hover-actions { display: flex; }
}

@media (max-width: 768px) {
  :root { --dw: min(280px, calc(100vw - 120px)); }

  /* ---------- layout: só o chat ocupa a tela ---------- */
  .app { display: block; position: relative; height: 100dvh; }
  .main { width: 100vw; height: 100dvh; }

  /* ---------- menu lateral (rail + sidebar) ---------- */
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 72px; z-index: 90;
    transform: translateX(-100%); transition: transform .25s ease;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: -110vw; width: var(--dw); z-index: 90;
    transition: left .25s ease; padding-top: env(safe-area-inset-top);
  }
  .user-panel {
    width: calc(72px + var(--dw)); z-index: 91;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: calc(8px + env(safe-area-inset-bottom));
    transform: translateX(-110%); transition: transform .25s ease;
  }
  .voice-bar { width: var(--dw); z-index: 91; transform: translateX(-110vw); transition: transform .25s ease; }
  body.drawer-open .rail { transform: none; }
  body.drawer-open .sidebar { left: 72px; }
  body.drawer-open .user-panel, body.drawer-open .voice-bar { transform: none; }

  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

  .hamb {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; margin-left: -8px; border-radius: 6px; color: var(--fg);
  }
  .hamb:active { background: var(--bg-hover); }

  /* ---------- cabeçalho ---------- */
  .main-header { padding: 0 10px; padding-top: env(safe-area-inset-top); height: calc(48px + env(safe-area-inset-top)); }
  .main-header .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mention-tag { display: none; }

  /* ---------- chat ---------- */
  .messages { padding: 10px 6px; }
  .msg { gap: 10px; padding: 4px 4px; }
  .msg .content { font-size: 15px; overflow-wrap: anywhere; }
  .msg .attachments img { max-width: 100%; max-height: 260px; }
  .embed, .link-preview { max-width: 100%; }
  .msg-reply-preview .preview { max-width: 55vw; }
  .msg-hover-actions { right: 6px; }
  .input-area { padding: 0 8px calc(10px + env(safe-area-inset-bottom)); }
  .input-wrap { padding: 0 10px; }
  .channel-welcome h1 { font-size: 24px !important; }
  .typing-indicator { padding: 4px 10px; }

  /* evita o zoom automático do iPhone ao tocar nos campos */
  input, textarea, select,
  .input-wrap input, .modal input, .modal textarea,
  .sidebar-search input, .search-friends, .emoji-search { font-size: 16px !important; }

  /* ---------- painéis ---------- */
  .main-body { position: relative; }
  .members-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(280px, 82vw);
    z-index: 20; box-shadow: -8px 0 24px rgba(0,0,0,.5);
  }
  .pinned-list { left: 8px; right: 8px; width: auto; top: calc(48px + env(safe-area-inset-top)); }
  .emoji-panel { width: min(330px, calc(100vw - 24px)); right: -8px; }
  .popout { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; z-index: 95; }

  /* ---------- amigos ---------- */
  .now-active { display: none; }
  .friends-content { padding: 12px; }
  .tabs { flex-wrap: wrap; }

  /* ---------- loja / prime ---------- */
  .shop-page { padding: 14px; }
  .shop-banner { padding: 24px 16px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .prime-topnav { padding: 12px 16px; gap: 20px; justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .prime-inner { padding: 20px 14px; }
  .prime-block { margin-bottom: 36px; }
  .prime-block h2 { font-size: 24px; }
  .news-hero { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .news-visual { height: 170px; }
  .compare-table th, .compare-table td { padding: 10px 8px; font-size: 13px; }
  .plans { grid-template-columns: 1fr; }

  /* ---------- janelas (modais) ---------- */
  .modal-backdrop { padding: 10px; align-items: flex-end; }
  .modal, .modal.wide, .modal.xwide { max-width: 100% !important; max-height: 92dvh; padding: 20px 16px; border-radius: 14px; }
  .template { padding: 10px; }
  /* configurações do servidor: menu vira abas na horizontal */
  .modal [style*="grid-template-columns:220px 1fr"] { grid-template-columns: 1fr !important; }
  .modal [style*="grid-template-columns:220px 1fr"] > div:first-child {
    display: flex; overflow-x: auto; padding: 44px 8px 8px !important; border-right: 0 !important; border-bottom: 1px solid #1e1f22;
  }
  .modal [style*="grid-template-columns:220px 1fr"] > div:first-child > div:first-child { display: none; }
  .modal [style*="grid-template-columns:220px 1fr"] .nav-item { white-space: nowrap; }
  #ss-content { padding: 16px !important; }
  .emo-list { grid-template-columns: 1fr; }
  .emo-add { flex-wrap: wrap; }
  .modal.ns-modal, .ns-grid { grid-template-columns: 1fr; }

  /* ---------- editar perfil ---------- */
  .edit-profile-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .edit-profile-page .side {
    flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px; gap: 4px;
  }
  .edit-profile-page .side .grp { display: none; }
  .edit-profile-page .side .nav-item { white-space: nowrap; flex-shrink: 0; }
  .edit-profile-page .side .close-btn { margin: 0 4px 0 0; flex-shrink: 0; }
  .edit-profile-page .content { padding: 20px 14px calc(30px + env(safe-area-inset-bottom)); }
  .edit-profile-page .frames-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  /* ---------- toast ---------- */
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); max-width: 90vw; text-align: center; }
}

/* ================================================================
   PÁGINA INICIAL (index.html) e páginas com body.land
   ================================================================ */
@media (max-width: 768px) {
  .land-nav { flex-wrap: wrap; gap: 0 12px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .land-nav .brandwrap span { font-size: 17px; }
  .land-hamb {
    display: flex; align-items: center; justify-content: center; order: 1; margin-left: auto;
    width: 42px; height: 42px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.08);
  }
  .land-hamb:active { background: rgba(255,255,255,.16); }
  /* links e botões ficam escondidos até abrir o menu */
  .land-nav .links, .land-nav .actions { display: none; width: 100%; margin: 0; }
  .land-nav.open .links { display: flex; flex-direction: column; order: 2; gap: 0; padding-top: 10px; }
  .land-nav.open .links a { padding: 14px 8px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .land-nav.open .actions { display: flex; flex-direction: column; order: 3; gap: 8px; padding: 14px 0 6px; }
  .land-nav.open .actions a { justify-content: center; padding: 13px 12px; font-size: 15px; background: rgba(255,255,255,.08); }
  .land-nav.open .actions a.criar { background: #5865f2; }
  .land-nav.open .actions a.openapp { background: #23a55a; }

  .hero { padding: 36px 18px 48px; gap: 36px; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 16px; }
  .hero .btns { flex-direction: column; }
  .hero .btns a { justify-content: center; width: 100%; }

  .stats { padding: 28px 16px; gap: 10px; }
  .stats .s .num { font-size: 26px; }
  .stats .s .lbl { font-size: 12px; }

  .features { padding: 48px 18px; }
  .features h2 { font-size: 28px; }

  .prime-banner { padding: 24px 14px; }
  .prime-card { padding: 28px 20px; gap: 24px; }
  .prime-card h3 { font-size: 26px; }
  .prime-card .checks { grid-template-columns: 1fr; }
  .prime-card button { width: 100%; }

  .cta-final { margin: 24px 14px 48px; padding: 40px 18px; }
  .cta-final h2 { font-size: 28px; }
  .footer { padding: 32px 18px; gap: 24px; }
}

/* ================================================================
   PAINEL DE PERFIL NA CONVERSA (DM) + PERFIL COMPLETO
   ================================================================ */
.dm-profile {
  width: 340px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--bg-2, #232428); border-left: 1px solid rgba(255,255,255,.06);
}
.dmp-banner { height: 120px; background-size: cover; background-position: center; flex-shrink: 0; }
.dmp-body { padding: 0 16px 16px; flex: 1; }
.dmp-av {
  margin-top: -44px; width: 80px; height: 80px; border-radius: 50%; box-sizing: content-box;
  border: 6px solid var(--bg-2, #232428);
}
.dmp-name { font-size: 20px; font-weight: 800; margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dmp-user { font-size: 13px; color: var(--fg-dim); margin: 2px 0 12px; }
.dmp-label { font-size: 12px; font-weight: 700; margin: 14px 0 4px; color: var(--fg); }
.dmp-text { font-size: 13px; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.dmp-btn {
  margin: 12px 16px 16px; padding: 12px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: #fff; font-weight: 700; cursor: pointer;
}
.dmp-btn:hover { background: rgba(255,255,255,.14); }

.modal.fullprof { max-width: 460px; padding: 0; overflow: hidden; }
.fp-banner { height: 140px; background-size: cover; background-position: center; }
.fp-body { padding: 0 24px 24px; }
.fp-av { margin-top: -52px; width: 96px; height: 96px; border-radius: 50%; box-sizing: content-box; border: 6px solid #232428; }
.fp-name { font-size: 22px; font-weight: 800; margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fp-user { font-size: 14px; color: var(--fg-dim); margin: 2px 0 14px; }
.fp-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.fp-btn {
  padding: 9px 16px; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.fp-btn.main { background: #5865f2; }

/* sem espaço: esconde o painel de perfil em telas menores */
@media (max-width: 1100px) { .dm-profile { display: none; } }

/* ================================================================
   PERFIL COMPLETO: correção de layout
   (fica no FINAL do arquivo para sobrescrever as regras acima)
   ================================================================ */
.modal.fullprof {
  max-width: 460px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.modal.fullprof .close-x {
  background: rgba(0,0,0,.55);
  color: #fff;
  z-index: 10;
}

.fp-banner { width: 100%; }
.fp-av { position: relative; }
.fp-av .user-avatar-wrap { display: block; }

.fp-name {
  text-align: left;
  line-height: 1.2;
}
.fp-user { text-align: left; }

/* botões lado a lado, ícone + texto alinhados */
.fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}
.fp-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  white-space: nowrap;
  line-height: 1;
  border: none;
  font-size: 14px;
}
.fp-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* textos de "Sobre mim" e "Membro desde" */
.fp-body .dmp-label { text-align: left; }
.fp-body .dmp-text { text-align: left; }
.fp-body .custom-status { display: block; margin-bottom: 8px; }

/* o badge e a tag não podem quebrar a linha do nome */
.fp-name .verified-badge,
.fp-name .tag-pill { margin-left: 0; flex-shrink: 0; }

/* no celular: perfil completo sobe de baixo, sem padding extra do .modal */
@media (max-width: 768px) {
  .modal.fullprof { padding: 0 !important; max-height: 92dvh; overflow-y: auto; }
  .fp-body { padding: 0 16px 20px; }
}

/* ================================================================
   FIX: o botão .fp-btn.main herdava o .main do layout (height:100vh)
   ================================================================ */
.fp-btn.main {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  background: #5865f2;
  animation: none !important;
  overflow: visible;
}
.fp-btn.main:hover { background: #4752c4; }
.fp-actions { align-items: center; }

/* ================================================================
   PERFIL COMPLETO: botões Mensagem / Adicionar amigo / Remover amigo
   ================================================================ */
.fp-btn.fp-main { background: #5865f2; }
.fp-btn.fp-main:hover { background: #4752c4; }
.fp-btn.fp-add { background: #23a55a; }
.fp-btn.fp-add:hover { background: #1e8e4d; }
.fp-btn.fp-add:disabled { opacity: .7; cursor: default; }
.fp-btn.fp-danger { background: rgba(218,55,60,.15); color: #f38ba8; }
.fp-btn.fp-danger:hover { background: var(--red); color: #fff; }