:root {
  --fundo: #F4F3EF; --branco: #FFFFFF; --tinta: #1C2430; --suave: #4F5866; --linha: #E2DFD7;
  --acento: #1F5F5B; --acento-claro: #EAF1F0; --acento-borda: #8FB8B2; --amarelo: #F2C46D;
  --alerta: #8A5A12; --alerta-fundo: #FBF4E6; --perigo: #A3261E;
  --titulo: 'Space Grotesk', system-ui, sans-serif; --corpo: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 15px/1.45 var(--corpo); }
a { color: var(--acento); text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pagina { max-width: 560px; margin: 0 auto; padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 16px; }
.pagina.larga { max-width: 980px; }
.pagina.estreita { max-width: 400px; }
.sem-nav .pagina { padding-bottom: 40px; }

/* Topo */
.topo { display: flex; flex-direction: column; gap: 6px; }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sobretitulo { font-size: 12px; font-weight: 600; color: var(--suave); letter-spacing: .05em; text-transform: uppercase; }
h1 { margin: 0; font: 700 32px/1.1 var(--titulo); letter-spacing: -0.02em; }
.h1-menor { font-size: 24px; }
.h1-item { font-size: 26px; }
h2 { margin: 0 0 8px; font: 600 16px var(--titulo); display: flex; align-items: baseline; gap: 8px; }
.meta { font-size: 12px; color: var(--suave); font-weight: 500; }
.riscado { text-decoration: line-through; color: var(--suave); }
.setas { display: flex; align-items: center; gap: 6px; }
.icone-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--branco); border: 1px solid var(--linha); display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; min-height: 40px; cursor: pointer; }
.chip svg { width: 16px; height: 16px; }
.chip-acento { background: var(--acento-claro); border-color: transparent; color: var(--acento); }
.voltar { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; min-height: 40px; }
.alternador { display: inline-flex; background: #E8E5DD; border-radius: 12px; padding: 3px; gap: 2px; }
.alternador a, .alternador span { padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--suave); min-height: 36px; display: inline-flex; align-items: center; }
.alternador span[aria-current] { background: var(--branco); color: var(--tinta); }
.aviso { background: var(--acento-claro); color: var(--acento); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.erro { background: #FBEAE8; color: var(--perigo); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; margin: 0; }

/* Resumo */
.resumo { background: var(--tinta); color: #F4F3EF; border-radius: 18px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumo.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resumo div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumo b { font: 600 22px var(--titulo); }
.resumo .destaque { color: #9FD8CF; }
.resumo span { font-size: 12px; color: #C9CED6; }

/* Captura */
.captura { display: flex; gap: 8px; align-items: center; background: var(--branco); border: 1px solid #D9D6CE; border-radius: 999px; padding: 5px 5px 5px 16px; }
.captura input { flex: 1; border: 0; outline: none; background: transparent; min-width: 0; font-size: 15px; padding: 8px 0; }
.captura button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Linha do tempo */
.linha-tempo { display: flex; flex-direction: column; gap: 10px; }
.faixa { display: flex; gap: 12px; align-items: stretch; }
.hora { width: 44px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--suave); padding-top: 12px; }
.cartao { flex: 1; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 12px 14px 12px 18px; display: flex; flex-direction: column; gap: 6px; color: var(--tinta); position: relative; overflow: hidden; }
.cartao::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cor); opacity: .55; }
.cartao .rotulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cor); }
.titulo-cartao { font-size: 16px; font-weight: 600; }
.cartao.feito { opacity: .6; }
.cartao.feito .titulo-cartao { text-decoration: line-through; }
.rec { color: var(--perigo); }
.livre { flex: 1; display: flex; justify-content: space-between; border: 1px dashed var(--acento-borda); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--acento); min-height: 44px; align-items: center; }
.barra { height: 6px; background: #E8E5DD; border-radius: 99px; overflow: hidden; display: block; }
.barra span { display: block; height: 100%; background: var(--acento); border-radius: 99px; transition: width .2s; }
.barra.grande { height: 8px; margin-bottom: 8px; }
.vazio { color: var(--suave); font-size: 14px; margin: 4px 0; }

/* Listas de tarefas */
.bloco-lista { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; }
.bloco-lista.alerta { background: var(--alerta-fundo); border-color: #EED9AE; }
.bloco-lista.alerta h2 { color: var(--alerta); }
.tarefa { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #F0EEE8; }
.tarefa:first-of-type { border-top: 0; }
.tarefa form { margin: 0; }
.tarefa a { flex: 1; color: var(--tinta); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-height: 32px; align-content: center; }
.tarefa.feito .t { text-decoration: line-through; color: var(--suave); }
.check { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #9AA1AC; background: var(--branco); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.tarefa.feito .check { background: var(--acento); border-color: var(--acento); color: #fff; }
.check svg { width: 16px; height: 16px; stroke-width: 3; }
.rodape { text-align: center; font-size: 12px; color: var(--suave); }

/* Grade do dia e da semana */
.grade-dia { display: flex; gap: 6px; }
.horas { width: 34px; flex-shrink: 0; position: relative; }
.horas span { position: absolute; right: 2px; transform: translateY(-50%); font-size: 11px; color: var(--suave); }
.grade-zoom { --px: 64px; }
.horas, .coluna { height: calc(var(--total) * var(--px) / 60); }
.coluna { flex: 1; position: relative; border-radius: 10px; background: repeating-linear-gradient(to bottom, var(--branco) 0, var(--branco) calc(var(--px) - 1px), #ECE9E2 calc(var(--px) - 1px), #ECE9E2 var(--px)); min-width: 0; }
.horas span { top: calc(var(--i) * var(--px)); }
.bloco, .bloco-livre { top: calc(var(--ini) * var(--px) / 60 + 1px); height: max(18px, calc(var(--dur) * var(--px) / 60 - 2px)); }
.bloco-livre { top: calc(var(--ini) * var(--px) / 60 + 2px); height: calc(var(--dur) * var(--px) / 60 - 4px); }
.bloco { position: absolute; left: 4px; right: 4px; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.bloco .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.titulo-bloco { font-size: 14px; font-weight: 600; color: var(--tinta); line-height: 1.25; }
.bloco.feito { opacity: .55; }
.bloco-livre { position: absolute; left: 4px; right: 4px; border: 1px dashed var(--acento-borda); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--acento); overflow: hidden; }
.semana { display: flex; flex-direction: column; gap: 4px; }
.cab-dias, .corpo-semana, .rodape-dias { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 3px; }
.corpo-semana .horas { width: auto; }
.cab-dia { display: flex; flex-direction: column; align-items: center; color: var(--suave); font-size: 11px; font-weight: 600; text-transform: uppercase; gap: 2px; padding: 4px 0; }
.cab-dia b { font: 700 15px var(--titulo); color: var(--tinta); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 99px; }
.cab-dia.hoje b { background: var(--acento); color: #fff; }
.col-semana { border-radius: 6px; }
.col-semana.passado { opacity: .6; }
.bloco.mini { left: 2px; right: 2px; padding: 3px 4px; font-size: 10px; font-weight: 700; line-height: 1.2; border-radius: 6px; display: block; hyphens: auto; overflow-wrap: break-word; }
.livre-dia { background: var(--acento-claro); border-radius: 6px; padding: 6px 0; text-align: center; display: flex; flex-direction: column; }
.livre-dia b { font: 700 13px var(--titulo); color: #164744; }
.livre-dia span { font-size: 10px; color: var(--acento); }
.livre-dia.passado { background: #ECE9E2; }
.livre-dia.passado b, .livre-dia.passado span { color: var(--suave); }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--suave); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Item */
.cronometro { background: var(--tinta); color: #F4F3EF; border-radius: 18px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cronometro div { display: flex; flex-direction: column; }
.cronometro b { font: 600 28px var(--titulo); font-variant-numeric: tabular-nums; }
.meta-claro { font-size: 12px; color: #C9CED6; }
.cronometro form { margin: 0; }
.btn-amarelo { border: 0; background: var(--amarelo); color: var(--tinta); border-radius: 12px; padding: 12px 18px; font-weight: 700; min-height: 48px; cursor: pointer; }
.checklist { background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.checklist h2 { margin: 0; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist li { display: flex; align-items: stretch; gap: 6px; }
.checklist li form { margin: 0; }
.ck-form { flex: 1; }
.ck { width: 100%; text-align: left; background: var(--fundo); border: 0; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.ck .caixa { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #9AA1AC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--branco); }
.ck .caixa svg { width: 16px; height: 16px; stroke-width: 3; color: transparent; }
li.feito .ck .caixa { background: var(--acento); border-color: var(--acento); }
li.feito .ck .caixa svg { color: #fff; }
li.feito .ck .t { text-decoration: line-through; color: var(--suave); }
.ck .t { font-weight: 600; }
.ck-excluir button { width: 40px; height: 100%; border: 0; background: transparent; color: var(--suave); font-size: 20px; cursor: pointer; border-radius: 10px; }
.add-ck { display: flex; gap: 8px; margin-top: 4px; }
.add-ck input { flex: 1; border: 1px dashed #9AA1AC; border-radius: 12px; padding: 10px 12px; background: transparent; min-width: 0; }
.acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.linha-form { display: flex; gap: 8px; }
.linha-form select { flex: 1; min-width: 0; }
.btn-escuro { width: 100%; border: 0; background: var(--tinta); color: #fff; border-radius: 12px; padding: 14px; font-weight: 600; min-height: 48px; cursor: pointer; }
.notas p { white-space: pre-wrap; margin: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; overflow-wrap: anywhere; }
details.editar, .cartao-claro { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; }
details summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
details[open] summary { margin-bottom: 10px; }

/* Formulários */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--suave); min-width: 0; }
.form input, .form select, .form textarea, .linha-form select { border: 1px solid #D9D6CE; border-radius: 10px; padding: 10px 12px; background: var(--branco); font-size: 15px; color: var(--tinta); font-weight: 400; width: 100%; min-height: 44px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grade-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.btn { border: 0; background: var(--acento); color: #fff; border-radius: 12px; padding: 13px 18px; font-weight: 700; min-height: 48px; cursor: pointer; }
.btn-claro { border: 1px solid var(--linha); background: var(--branco); border-radius: 12px; padding: 12px; font-weight: 600; cursor: pointer; }
.excluir { margin-top: 12px; }
.link-perigo { border: 0; background: none; color: var(--perigo); font-weight: 600; padding: 8px 0; cursor: pointer; }
.exemplos { margin: 10px 0; padding-left: 18px; font-size: 14px; color: var(--suave); display: flex; flex-direction: column; gap: 4px; }
.exemplos i { color: var(--tinta); }
.modelo summary { justify-content: space-between; }
.qr { background: #fff; padding: 12px; border-radius: 12px; width: 220px; max-width: 100%; }
.qr svg { width: 100%; height: auto; stroke: none; }
code { background: var(--fundo); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.login { display: flex; flex-direction: column; gap: 14px; margin-top: 10vh; }

/* Navegação inferior */
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--branco); border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); z-index: 10; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--suave); min-height: 50px; }
.nav a.ativo { color: var(--acento); font-weight: 700; }
.nav-novo span { width: 48px; height: 48px; border-radius: 16px; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; }
.nav-novo span svg { width: 24px; height: 24px; }

@media (min-width: 700px) {
  h1 { font-size: 36px; }
  .bloco.mini { font-size: 11px; padding: 4px 6px; }
}

/* Zoom */
.zoom { display: inline-flex; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.zoom button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; font-weight: 600; color: var(--tinta); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zoom button + button { border-left: 1px solid var(--linha); }
.zoom svg { width: 18px; height: 18px; }
.dica { font-size: 12px; color: var(--suave); margin: 0; text-align: center; }
.mini-hora { font-weight: 500; opacity: .8; }

/* Prévia flutuante */
.previa[hidden] { display: none; }
#popover { position: fixed; z-index: 50; width: 280px; max-width: calc(100vw - 24px); background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(28, 36, 48, .18); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#popover.toque { pointer-events: auto; }
#popover[hidden] { display: none; }
#popover .rotulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.previa-titulo { font-size: 15px; line-height: 1.3; }
#popover ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
#popover li.feito { color: var(--suave); text-decoration: line-through; }
.previa-notas { margin: 0; font-size: 13px; color: var(--suave); white-space: pre-wrap; overflow-wrap: anywhere; }
#popover .abrir { align-self: flex-start; margin-top: 4px; }
.semana.grade-zoom { --px: 44px; }

/* ===== Ecossistema: menu lateral, chat ===== */
.lateral { display: none; }
.lateral a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #C9CED6; font-weight: 500; font-size: 14px; min-height: 40px; }
.lateral a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral a.ativo { background: rgba(159,216,207,.14); color: #fff; font-weight: 600; }
.lateral a em { margin-left: auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #8A93A1; }
.lateral .marca { color: #fff; font: 700 17px var(--titulo); padding: 6px 8px 14px; }
.lateral .marca:hover { background: none; }
.grupo { font-size: 11px; font-weight: 700; color: #8A93A1; text-transform: uppercase; letter-spacing: .08em; padding: 16px 12px 6px; }
.ponto-ok { width: 8px; height: 8px; border-radius: 99px; background: #6FCF97; margin-left: auto; }
.veu { position: fixed; inset: 0; background: rgba(28,36,48,.45); z-index: 30; }
.lateral.aberta { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 272px; background: var(--tinta); padding: 18px 12px; overflow-y: auto; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,.2); }
.nav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--suave); min-height: 50px; cursor: pointer; padding: 0; }

.fab-chat { display: none; }
.chat { position: fixed; inset: 0; z-index: 60; background: var(--fundo); display: flex; flex-direction: column; }
.chat[hidden] { display: none; }
.chat-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linha); background: var(--branco); }
.chat-topo b { font: 700 18px var(--titulo); margin-right: 8px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--tinta); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 4px; }
.msg .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg .links a { font-size: 12px; font-weight: 600; background: var(--acento-claro); color: var(--acento); border-radius: 8px; padding: 5px 8px; }
.msg.pensando { color: var(--suave); font-style: italic; }
.msg .canal { display: block; font-size: 10px; opacity: .65; margin-top: 4px; }
.chat-vazio { color: var(--suave); font-size: 14px; text-align: center; margin: auto 0; }
.chat-vazio button { margin: 4px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: var(--branco); }
.chat-form textarea { flex: 1; resize: none; border: 1px solid #D9D6CE; border-radius: 14px; padding: 11px 12px; font-size: 15px; max-height: 140px; min-height: 44px; background: var(--fundo); outline: none; }
.chat-enviar, .chat-mic { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.chat-mic { background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); }
.chat-mic.ouvindo { background: #FBEAE8; color: var(--perigo); border-color: #F2C9C4; }
.chat-mic[hidden] { display: none; }

.tag-agenda { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--suave); }
.tag-agenda.grande { margin: 0; font-size: 13px; }
.bolinha { width: 8px; height: 8px; border-radius: 99px; display: inline-block; flex-shrink: 0; }
.info-ext { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.info-ext details { width: 100%; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; }
.info-ext .desc { white-space: pre-wrap; font-size: 13px; color: var(--suave); margin: 0; overflow-wrap: anywhere; }
.bloco-codigo { background: var(--tinta); color: #E8EAED; border-radius: 12px; padding: 12px; font-size: 13px; overflow-x: auto; }
.lista-agendas { display: flex; flex-direction: column; gap: 4px; }
.agenda-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #F0EEE8; flex-wrap: wrap; }
.agenda-linha:first-child { border-top: 0; }
.form .agenda-nome { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); font-size: 15px; }
.form .agenda-padrao { flex-direction: row; align-items: center; gap: 6px; }
.form .agenda-nome input, .form .agenda-padrao input { width: auto; min-height: 0; }
a.btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
form.inline { display: inline; }
.link { border: 0; background: none; color: var(--acento); font: inherit; font-size: 12px; padding: 0; cursor: pointer; }

@media (min-width: 900px) {
  body.com-menu { padding-left: 248px; }
  .lateral { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 248px; background: var(--tinta); padding: 18px 12px; overflow-y: auto; z-index: 20; }
  .lateral.aberta { width: 248px; box-shadow: none; }
  .veu { display: none; }
  .nav { display: none; }
  .pagina { padding-bottom: 60px; padding-top: 28px; }
  .fab-chat { display: flex; align-items: center; gap: 8px; position: fixed; right: 24px; bottom: 24px; z-index: 25; border: 0; background: var(--acento); color: #fff; border-radius: 999px; padding: 14px 20px; font-weight: 700; box-shadow: 0 10px 24px rgba(31,95,91,.35); cursor: pointer; }
  .chat { inset: 0 0 0 auto; width: 420px; box-shadow: -12px 0 32px rgba(28,36,48,.16); border-left: 1px solid var(--linha); }
  body.chat-aberto .fab-chat { display: none; }
  body.chat-aberto .pagina.larga { margin-right: 420px; }
}
@media (min-width: 1200px) {
  body.chat-aberto .pagina { margin-right: 436px; margin-left: auto; }
  body.chat-aberto .pagina.larga { margin-right: 436px; }
}