/* T_ROOM - janelas flutuantes (js/janelas.js). Só vale em tela larga com mouse: no celular/<= 760 px nada daqui liga
   (o JS só põe .jn-on quando o sistema está ativo). Cores e raios vêm das variáveis do style.css. */

/* cabeçalho = alça de arrastar */
.jn-on :is(.modal-head, .side-head, .tg-topo, [data-jn-cab]) { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.jn-on.jn-ocupada :is(.modal-head, .side-head, .tg-topo, [data-jn-cab]) { cursor: grabbing; }
.jn-on :is(.modal-head, .side-head, .tg-topo) :is(input, select, textarea) { cursor: text; }
.jn-on :is(.modal-head, .side-head, .tg-topo) :is(button, a, label) { cursor: pointer; }

/* janela solta: posição por `translate` (o JS escreve), tamanho só depois de redimensionar */
.jn-solta {
  position: fixed !important; inset: 0 auto auto 0 !important; margin: 0 !important;
  max-width: calc(100vw - 6px - 2em); max-height: calc(100vh - 6px - 2em); max-height: calc(100dvh - 6px - 2em);   /* o mesmo teto do <dialog> */
  contain: layout paint;
}
.jn-solta.jn-tam { max-width: 100vw; max-height: 100vh; max-height: 100dvh; }   /* depois de redimensionar vale a tela inteira */
.modal.jn-solta { box-shadow: var(--shadow); }
.side.jn-solta, .tchat-gaveta.jn-solta {   /* painel que era encaixado: agora é janela por cima da página */
  flex: none !important; transform: none !important; transition: none !important;
  border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tchat-gaveta.jn-solta .tg-topo { border-radius: var(--radius) var(--radius) 0 0; }
.tchat-gaveta.jn-solta.fixa {   /* "Fixar ao lado" vale mais que a posição solta */
  inset: 0 0 0 auto !important; translate: none !important; width: min(var(--tg-w), 100vw) !important; height: auto !important;
  border: 0; border-left: 1px solid var(--border-2); border-radius: 0; box-shadow: none; contain: none;
}
.jn-solta.jn-max { border-radius: 0; }
.jn-anim { transition: translate .14s ease, width .14s ease, height .14s ease; }
.jn-ocupada { will-change: translate, width, height; }
.jn-ocupada, .jn-ocupada * { user-select: none !important; -webkit-user-select: none !important; }
.jn-ocupada iframe, .jn-ocupada video, .jn-ocupada canvas { pointer-events: none; }

/* cursor das bordas e cantos (a zona de 8 px é calculada no JS: 16 px com toque) */
.jn-on[data-jn-z="n"], .jn-on[data-jn-z="n"] *, .jn-on[data-jn-z="s"], .jn-on[data-jn-z="s"] * { cursor: ns-resize !important; }
.jn-on[data-jn-z="e"], .jn-on[data-jn-z="e"] *, .jn-on[data-jn-z="w"], .jn-on[data-jn-z="w"] * { cursor: ew-resize !important; }
.jn-on[data-jn-z="ne"], .jn-on[data-jn-z="ne"] *, .jn-on[data-jn-z="sw"], .jn-on[data-jn-z="sw"] * { cursor: nesw-resize !important; }
.jn-on[data-jn-z="nw"], .jn-on[data-jn-z="nw"] *, .jn-on[data-jn-z="se"], .jn-on[data-jn-z="se"] * { cursor: nwse-resize !important; }

@media (prefers-reduced-motion: reduce) { .jn-anim { transition: none; } }