/* ============================================================
   desktop.css — mesmo visual, reorganizado para telas grandes
   ------------------------------------------------------------
   < 520px   → fluido, tela cheia (mobile)
   520–899px → moldura de telefone centralizada (tablet/preview)
   ≥ 900px   → desktop 100% de largura:
               · menu lateral colapsável (botão de perfil)
               · painel de Aulas em tela cheia
   ============================================================ */

/* --- Ponteiro fino: estados de hover ---------------------- */
@media (hover: hover) and (pointer: fine) {
  .orb:hover        { background: var(--track); }
  .ir-ao-fim:hover  { background: var(--track); }
  .chip:hover       { background: #EBEBEB; color: var(--ink); }
  .pilula:hover     { background: var(--track); color: var(--ink); }
  .passo:hover      { background: #EBEBEB; }
  .pagina__atualizar:hover { background: var(--line); color: var(--ink); }
  .post:hover .post__capa,
  .video:hover .video__capa { transform: scale(1.012); }
  .action:not([disabled]):hover { background: var(--brown-deep); }
  .segment:hover    { color: var(--ink); }
  .row:hover        { background: var(--track); }
  .chat-previews > .chat-reference-card:hover { background: #FAF9F7; }
  /* O ponteiro em cima só clareia a linha, sem sombra. */
  #sheet-profile .row:hover { background: #FAF9F7; box-shadow: none; }
  .new-chat:hover { background: #EBEBEB; }
  #sheet-profile .new-action:hover { filter: brightness(.97); }
  button.row__icon:hover { background: var(--line); color: var(--ink); }
}

/* =========================================================
   DESKTOP — a partir de 900px
   ========================================================= */
@media (min-width: 900px) {

  :root {
    --sidebar-w: 300px;
    --column-w: 1040px;
    --topbar-h: 64px;
    --lessons-max: 1360px;
  }

  body { display: block; background: var(--bg); }

  /* --- Shell ocupa 100% da tela em duas colunas ----------- */
  .app {
    max-width: none;
    height: var(--altura, 100dvh);
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "side topbar"
      "side stage";
    transition: grid-template-columns var(--t-slow) var(--ease-out);
  }

  /* Menu lateral recolhido — por escolha, ou porque o editor está aberto. */
  .app[data-side="closed"],
  .app[data-editando="true"] { grid-template-columns: 0px minmax(0, 1fr); }

  .topbar { grid-area: topbar; }
  .stage  { grid-area: stage; }

  /* --- Topbar: menu + marca · pages · aulas -------------- */
  .topbar {
    grid-template-columns: 1fr auto 1fr;
    padding-inline: 20px;
    border-bottom: 1px solid var(--line);
    background: var(--glass-bg-deep);
  }

  /* O avatar e a marca dão lugar aos dois traços, que abrem e fecham
     a coluna lateral. */
  #btn-profile { display: none; }
  .wordmark    { display: none; }
  #btn-menu    { display: grid; }

  .segments  { width: 240px; justify-self: center; }
  #btn-lessons { justify-self: end; }

  /* --- Coluna central limitada e centralizada ----------- */
  .thread {
    width: 100%;
    max-width: var(--column-w);
    margin-inline: auto;
    padding: 32px 24px calc(var(--dock-h, 96px) + 28px);
    gap: var(--gap-6);
  }

  .msg--me .msg__body { max-width: 70%; }

  .dock { --dock-pb: 30px; padding: 0 24px var(--dock-pb); }

  .composer {
    width: 100%;
    max-width: var(--column-w);
    margin-inline: auto;
    padding: 0;
  }

  .composer__main { padding-inline: 12px; }

  .empty__title { font-size: 31px; }

  /* -------------------------------------------------------
     Menu lateral (perfil + conversas) — abre e fecha
     ------------------------------------------------------- */
  #sheet-profile {
    grid-area: side;
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    transform: none !important;
    visibility: visible !important;
    z-index: 10;
    border-radius: 0;
    border-right: 1px solid var(--line);
    background: var(--menu-bg);
    /* Sem relevo: a linha da direita já separa a coluna do conteúdo. */
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-top: 0;
    padding-bottom: 16px;
    opacity: 1;
    transition: opacity var(--t-base) var(--ease-out);
  }

  #sheet-profile > * { min-width: var(--sidebar-w); }

  .app[data-side="closed"] #sheet-profile,
  .app[data-editando="true"] #sheet-profile {
    opacity: 0;
    border-right-color: transparent;
    pointer-events: none;
  }

  /* No desktop não há o que fechar: fica só o bloco da conta no topo. */
  #sheet-profile [data-close-sheet] { display: none; }
  #sheet-profile .sheet__head { padding: 18px 12px 12px; }

  /* -------------------------------------------------------
     Aulas — painel em 100% de largura
     ------------------------------------------------------- */
  #sheet-lessons { padding: 0 0 24px; }

  /* Conteúdo centralizado numa coluna de até 1080px. */
  #sheet-lessons .sheet__head,
  #sheet-lessons .sheet__body {
    padding-inline: max(32px, calc((100% - var(--lessons-max)) / 2));
  }


  #sheet-lessons .sheet__head {
    height: calc(var(--topbar-h) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-bottom: 0;
  }

  #sheet-lessons .sheet__body { padding-block: 28px 56px; }

  #sheet-lessons .sheet__title { font-size: 23px; letter-spacing: -.02em; }


  .scrim { left: 0; }
}

/* --- Telas muito largas: mais respiro --------------------- */
@media (min-width: 1440px) {
  :root { --column-w: 1200px; --sidebar-w: 320px; }
}