/* Janelas dos modais (08/11/2026) — par do assets/js/janelas.js. Carregado depois das outras folhas de estilo. */

/* ── tamanho padrão: quatro medidas para o sistema inteiro ─────────────── */
.modal { resize: none !important; }
.jm-janela { min-width: 0 !important; overscroll-behavior: contain; }
.jm-janela.jm-t-p  { width: min(480px,  calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; }
.jm-janela.jm-t-m  { width: min(640px,  calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; }
.jm-janela.jm-t-g  { width: min(860px,  calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; }
.jm-janela.jm-t-gg { width: min(1120px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; }
.modal.jm-janela { max-height: calc(100dvh - 32px); margin: 0 !important; }
/* a caixa interna acompanha a casca (antes sobrava área vazia ao lado) */
.jm-janela > .modal-box, .jm-janela > .modal-content { width: 100% !important; max-width: 100% !important; }

/* Atendimento, Hubsoft e Sincronização usam .modal como fundo em tela cheia, e o .modal geral (style.css) empurrava
 * esse fundo para fora da tela: transform -50% e largura de 650 px. */
.modal[data-jm-fundo] {
    transform: none !important; width: auto !important; max-width: none !important; max-height: none !important; min-width: 0 !important;
    border: 0 !important; box-shadow: none !important; animation: none !important; backdrop-filter: none !important; background: rgba(0,0,0,.55) !important;
}

/* ── tamanho livre (o usuário arrastou) e tela cheia ───────────────────── */
@media (min-width: 641px) {
    .jm-janela.jm-livre {
        position: fixed !important; left: var(--jm-x) !important; top: var(--jm-y) !important; right: auto !important; bottom: auto !important;
        width: var(--jm-w) !important; height: var(--jm-h) !important;
        max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; animation: none !important;
        overflow: auto;
    }
}
.jm-janela.jm-max {
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; animation: none !important;
    border: none !important; overflow: auto;
}
.jm-livre > .modal-box, .jm-max > .modal-box, .jm-livre > .modal-content, .jm-max > .modal-content { max-height: none !important; min-height: 100%; }
.jm-livre [style*="max-height"][style*="vh"], .jm-max [style*="max-height"][style*="vh"] { max-height: none !important; }

/* cabeçalho e rodapé ficam presos; só o miolo rola */
/* só em janela aberta: display com !important faria uma janela fechada reaparecer */
.jm-flex:not(.hidden):not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; flex-direction: column; overflow: hidden !important; }
.jm-flex > .modal-box, .jm-flex > .modal-content, .jm-flex > form:not(.modal-body) { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.jm-flex .modal-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto !important; }
.jm-flex .modal-header, .jm-flex .modal-footer { flex: 0 0 auto; }

/* cadastro de dispositivo: a janela completa usa regras com #id e !important; aqui ela vira janela quando o usuário pede */
@media (min-width: 641px) {
    #modal-device.devj.jm-livre:not(.jm-max) {
        inset: auto !important; left: var(--jm-x) !important; top: var(--jm-y) !important;
        width: var(--jm-w) !important; height: var(--jm-h) !important; border: 1px solid var(--border) !important; animation: none !important;
    }
}
/* ── botões do cabeçalho ───────────────────────────────────────────────── */
.jm-ctrl { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.jm-ctrl + .modal-close, .jm-ctrl + button { margin-left: 2px; }
.jm-ctrl-solto { position: absolute; top: 8px; right: 8px; z-index: 3; }
.jm-btn {
    width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary, #94a3b8);
}
.jm-btn:hover { background: var(--bg-hover, rgba(148,163,184,.16)); color: var(--text-primary, #e2e8f0); }
.jm-btn:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: 1px; }
.jm-btn.jm-apagado { opacity: .35; }
@media (min-width: 641px) {
    .jm-cabecalho { cursor: move; touch-action: none; user-select: none; }
    .jm-cabecalho button, .jm-cabecalho a, .jm-cabecalho input, .jm-cabecalho select { cursor: pointer; }
    .jm-cabecalho input { cursor: text; user-select: text; }
}
.jm-janela.jm-max .jm-cabecalho { cursor: default; }

/* ── alças ─────────────────────────────────────────────────────────────── */
#jm-moldura { position: fixed; display: none; z-index: 2147482000; pointer-events: none; }
.jm-a { position: absolute; pointer-events: auto; touch-action: none; }
.jm-a-n { top: -6px; left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.jm-a-s { bottom: -6px; left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.jm-a-e { right: -7px; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.jm-a-w { left: -6px; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.jm-a-nw, .jm-a-ne, .jm-a-sw, .jm-a-se { width: 20px; height: 20px; }
.jm-a-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.jm-a-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.jm-a-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.jm-a-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.jm-a-se::after {
    content: ""; position: absolute; right: 9px; bottom: 9px; width: 10px; height: 10px; pointer-events: none; opacity: .75;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted, #64748b) 50%, var(--text-muted, #64748b) 60%, transparent 60%, transparent 72%, var(--text-muted, #64748b) 72%, var(--text-muted, #64748b) 82%, transparent 82%);
}
@media (pointer: coarse) {
    .jm-a-n, .jm-a-s { height: 22px; } .jm-a-n { top: -12px; } .jm-a-s { bottom: -12px; }
    .jm-a-e, .jm-a-w { width: 22px; } .jm-a-e { right: -12px; } .jm-a-w { left: -12px; }
    .jm-a-nw, .jm-a-ne, .jm-a-sw, .jm-a-se { width: 34px; height: 34px; }
    .jm-btn { width: 36px; height: 36px; }
}
#jm-escudo { position: fixed; inset: 0; z-index: 2147483000; display: none; touch-action: none; }
.jm-arrastando, .jm-arrastando * { user-select: none !important; }
.jm-arrastando iframe { pointer-events: none !important; }

/* ── minimizada ────────────────────────────────────────────────────────── */
.jm-min { display: none !important; }
#jm-doca {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2147481000;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: calc(100vw - 24px); pointer-events: none;
}
.jm-chip {
    display: inline-flex; align-items: stretch; pointer-events: auto; max-width: 240px; background: var(--bg-elevated, #1e293b);
    border: 1px solid var(--border, #334155); box-shadow: 0 6px 20px rgba(0,0,0,.4); border-radius: 6px; overflow: hidden;
}
.jm-chip button { background: none; border: 0; color: var(--text-primary, #e2e8f0); cursor: pointer; font: inherit; font-size: 12.5px; }
.jm-chip-abrir { padding: 8px 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-chip-fechar { padding: 0 10px; color: var(--text-secondary, #94a3b8) !important; font-size: 16px !important; border-left: 1px solid var(--border, #334155) !important; }
.jm-chip button:hover { background: var(--bg-hover, rgba(148,163,184,.16)); }

/* ── celular: a janela sobe de baixo, largura toda; as maiores ocupam a tela inteira ── */
@keyframes jmSobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
    .jm-janela:not(.jm-max) {
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
        width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0 !important;
        transform: none !important; animation: jmSobe .2s ease-out; border-width: 1px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .jm-janela.jm-t-g:not(.jm-max), .jm-janela.jm-t-gg:not(.jm-max), .jm-janela.modal-full:not(.jm-max),
    .jm-janela.modal-graphs:not(.jm-max), .jm-janela.modal-devitems:not(.jm-max) { top: 0 !important; height: 100dvh !important; }
    .jm-janela:not(.hidden):not([style*="display: none"]):not([style*="display:none"]):is(:has(> .modal-body), :has(> .modal-box > .modal-body), :has(> form > .modal-body), :has(> .modal-content > .modal-body)) { display: flex !important; flex-direction: column; overflow: hidden !important; }
    .jm-janela > .modal-box, .jm-janela > .modal-content, .jm-janela > form:not(.modal-body) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .jm-janela .modal-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto !important; -webkit-overflow-scrolling: touch; }
    .jm-janela .modal-header { padding: 12px 14px; flex: 0 0 auto; }
    .jm-janela .modal-footer { flex: 0 0 auto; }
    .jm-janela .modal-footer .btn, .jm-janela .modal-footer button { min-height: 42px; }
    .jm-janela .modal-close { min-width: 40px; min-height: 40px; }
    .jm-ctrl .jm-btn[data-acao="padrao"] { display: none; }
    #modal-device .jm-btn[data-acao="max"] { display: none; }     /* no celular ele já é sempre tela cheia */
    .jm-btn { width: 38px; height: 38px; }
    #jm-moldura { display: none !important; }
    .jm-com-janela .cl-aba { display: none !important; }      /* a aba da IA cobria os campos da janela */
    .jm-chip { max-width: calc(50vw - 18px); }
    .jm-chip-abrir, .jm-chip-fechar { min-height: 42px; }
}
/* teclado do celular: campo com menos de 16 px faz o iPhone dar zoom na tela */
@media (max-width: 768px) and (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}