:root {
  --fonte: "Segoe UI", Tahoma, Verdana, sans-serif;
  --texto: #1b2a3a;
  --texto-suave: #5d6f82;
  --texto-titulo: #1e3a5f;
  --borda-janela: #6f99c6;
  --titulo-topo: #e3eefa;
  --titulo-base: #bcd5ef;
  --cabecalho-topo: #f4f9ff;
  --cabecalho-base: #d6e7f8;
  --fundo-conteudo: #ffffff;
  --linha: #d4e1ee;
  --destaque: #cfe5fb;
  --destaque-borda: #8ab8e6;
  --link: #1a5fb4;
  --botao-topo: #fdfdfd;
  --botao-base: #dde7f1;
  --botao-borda: #8ea7c1;
  --perigo: #c42b1c;
  --online: #3cb631;
  --ausente: #f0ac00;
  --ocupado: #d93a2b;
  --offline: #9aa4ae;
  --barra: #1d4f8c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--fonte);
  font-size: 13px;
  color: var(--texto);
  background: #2a7fd9;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }

#area-trabalho {
  position: fixed;
  inset: 0 0 34px 0;
  background:
    radial-gradient(ellipse 85% 45% at 25% 100%, #67b545 0 60%, transparent 61%),
    radial-gradient(ellipse 70% 38% at 85% 100%, #4f9c35 0 60%, transparent 61%),
    linear-gradient(#1f6fcf 0%, #5aa7ee 45%, #b9dcf8 80%);
}
body.sem-barra #area-trabalho { bottom: 0; }

/* ---------------------------------------------------------------- janelas */

.janela {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 220px;
  background: var(--fundo-conteudo);
  border: 1px solid var(--borda-janela);
  border-radius: 8px 8px 5px 5px;
  box-shadow: 0 8px 28px rgba(10, 40, 80, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  overflow: hidden;
  resize: both;
}
.janela.minimizada { display: none; }
.janela.tremendo { animation: tremer .45s linear 2; }
@keyframes tremer {
  0%, 100% { translate: 0 0; }
  20% { translate: -9px 3px; }
  40% { translate: 8px -4px; }
  60% { translate: -7px -3px; }
  80% { translate: 6px 4px; }
}

.titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 9px;
  background: linear-gradient(var(--titulo-topo), var(--titulo-base));
  border-bottom: 1px solid #9dbbdb;
  color: var(--texto-titulo);
  cursor: default;
  user-select: none;
  touch-action: none;
  flex: none;
}
.janela.inativa .titulo { filter: saturate(.4); opacity: .92; }
.titulo img { width: 16px; height: 16px; }
.titulo-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo-botoes { display: flex; gap: 2px; }
.titulo-botoes button {
  width: 28px; height: 20px;
  border: 1px solid #8aa8c8;
  border-radius: 3px;
  background: linear-gradient(#fafcff, #d3e2f2);
  line-height: 1;
  cursor: pointer;
}
.titulo-botoes button:hover { background: linear-gradient(#ffffff, #bcd6f1); }
.titulo-botoes .fechar:hover { background: linear-gradient(#f39a8c, #d4402a); color: #fff; border-color: #a6301e; }

.conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- comuns */

.botao {
  padding: 4px 16px;
  min-height: 26px;
  border: 1px solid var(--botao-borda);
  border-radius: 3px;
  background: linear-gradient(var(--botao-topo), var(--botao-base));
  cursor: pointer;
}
.botao:hover { border-color: #3c7fb1; background: linear-gradient(#f2f9ff, #c7e1f6); }
.botao:active { background: linear-gradient(#c7e1f6, #e8f3fc); }
.botao:disabled { opacity: .55; cursor: default; }
.botao.principal { font-weight: 600; }
.botao.perigo { color: var(--perigo); }

.campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.campo input, .campo select, .entrada {
  padding: 4px 6px;
  min-height: 26px;
  border: 1px solid #a5b9cf;
  border-radius: 2px;
  background: #fff;
}
.campo input:focus, .entrada:focus, textarea:focus { outline: 2px solid #7fb4ea; outline-offset: -1px; }

.marcar { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.erro-form { color: var(--perigo); min-height: 18px; margin: 4px 0; }
.ok-form { color: #2a7d2a; min-height: 18px; margin: 4px 0; }
.dica { color: var(--texto-suave); font-size: 12px; }
a, .link { color: var(--link); }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.cabecalho {
  background: linear-gradient(var(--cabecalho-topo), var(--cabecalho-base));
  border-bottom: 1px solid var(--linha);
}

/* ---------------------------------------------------------------- avatar */

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  padding: 3px;
  background: linear-gradient(#ffffff, #dbe6f0);
  border: 1px solid #9fb3c8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.avatar.st-online  { border-color: #57c149; background: linear-gradient(#e9fbe4, #a9e39b); }
.avatar.st-ausente { border-color: #f0ac00; background: linear-gradient(#fff6dc, #f6d47a); }
.avatar.st-ocupado { border-color: #d93a2b; background: linear-gradient(#ffe6e3, #f1a199); }
.avatar-img {
  width: 100%; height: 100%;
  border-radius: 4px;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.boneco { width: 18px; height: 18px; flex: none; }
.boneco.st-online  { color: var(--online); }
.boneco.st-ausente { color: var(--ausente); }
.boneco.st-ocupado { color: var(--ocupado); }
.boneco.st-offline, .boneco.st-invisivel { color: var(--offline); }

/* ---------------------------------------------------------------- login */

.tela-login .conteudo {
  align-items: center;
  padding: 24px 28px 16px;
  overflow: auto;
  background: linear-gradient(#ffffff 55%, #e6f0fa);
}
.tela-login form { width: 100%; max-width: 250px; }
.tela-login .avatar { margin: 6px 0 22px; }
.tela-login h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--texto-titulo); text-align: center; }
.tela-login .botoes { display: flex; justify-content: center; margin-top: 12px; }
.tela-login .rodape { margin-top: auto; padding-top: 20px; width: 100%; max-width: 250px; }
.status-escolha { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.status-escolha select { border: 1px solid transparent; background: transparent; padding: 2px; color: var(--link); cursor: pointer; }
.status-escolha select:hover { border-color: #a5b9cf; }

/* ---------------------------------------------------------------- lista de contatos */

.perfil { display: flex; gap: 10px; padding: 10px; position: relative; }
.perfil-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.perfil-nome {
  display: flex; align-items: baseline; gap: 4px;
  max-width: 100%;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.perfil-nome:hover { border-color: var(--destaque-borda); background: #fff; }
.perfil-nome b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-nome span { color: var(--texto-suave); white-space: nowrap; }
.perfil-msg {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--texto-suave);
}
.perfil-msg:hover { border-color: var(--destaque-borda); background: #fff; }
.perfil-msg:focus { background: #fff; color: var(--texto); }

.menu {
  position: absolute;
  z-index: 50;
  min-width: 190px;
  padding: 3px;
  background: #fff;
  border: 1px solid #97adc4;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .22);
}
.menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
}
.menu button:hover { background: var(--destaque); border-color: var(--destaque-borda); }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 3px 0; }

.ferramentas {
  display: flex; gap: 2px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--linha);
  background: #f5f9fd;
}
.ferramenta {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.ferramenta:hover { background: var(--destaque); border-color: var(--destaque-borda); }
.ferramenta svg { width: 16px; height: 16px; }

.busca { padding: 6px; border-bottom: 1px solid var(--linha); }
.busca input { width: 100%; }

.contatos { flex: 1; overflow: auto; padding: 4px 0 10px; }
.grupo-titulo {
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--texto-titulo);
  cursor: pointer;
  text-align: left;
}
.grupo-titulo::before { content: "▾"; width: 12px; color: var(--texto-suave); }
.grupo.fechado .grupo-titulo::before { content: "▸"; }
.grupo.fechado .grupo-itens { display: none; }

.contato {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 3px 8px 3px 22px;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
}
.contato:hover, .contato:focus-visible { background: var(--destaque); border-color: var(--destaque-borda); outline: none; }
.contato-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contato-texto small { color: var(--texto-suave); font-size: 12px; }
.contato.offline .contato-nome { color: var(--texto-suave); }
.selo {
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e8710a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
.vazio { padding: 6px 22px; color: var(--texto-suave); }

.conexao { padding: 3px 8px; background: #fff4ce; border-top: 1px solid #e8d48a; font-size: 12px; }

/* ---------------------------------------------------------------- conversa */

.chat-topo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-width: 0; }
.chat-topo-texto { min-width: 0; }
.chat-topo-nome { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topo-nome b { font-size: 14px; font-weight: 600; }
.chat-topo-nome span { color: var(--texto-suave); }
.chat-topo-msg { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-corpo { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px; background: #eef4fa; }
.chat-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-msgs {
  flex: 1; min-height: 60px;
  overflow: auto;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #b7c9dc;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.chat-avatares { display: flex; flex-direction: column; justify-content: space-between; }

.bloco { margin-bottom: 8px; }
.bloco-autor { color: var(--texto-suave); }
.bloco-linha { padding-left: 14px; white-space: pre-wrap; }
.bloco-linha .hora { visibility: hidden; color: var(--texto-suave); font-size: 11px; margin-left: 6px; }
.bloco-linha:hover .hora { visibility: visible; }
.evento { margin: 6px 0; color: #8a5a00; font-style: italic; }
.dia { margin: 10px 0 6px; text-align: center; color: var(--texto-suave); font-size: 12px; }
.mais-antigas { display: block; margin: 0 auto 8px; }
.emo { font-size: 17px; line-height: 1; vertical-align: -2px; }

.chat-digitando { min-height: 17px; color: var(--texto-suave); font-size: 12px; }

.chat-escrever { border: 1px solid #b7c9dc; border-radius: 3px; background: #fff; position: relative; }
.chat-ferramentas { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid var(--linha); background: #f5f9fd; }
.chat-entrada { display: flex; gap: 6px; padding: 6px; }
.chat-entrada textarea { flex: 1; min-height: 52px; max-height: 120px; resize: none; border: 0; padding: 2px; }
.chat-entrada .botao { align-self: stretch; }

.emoticons {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 2px;
  padding: 6px;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid #97adc4;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .22);
}
.emoticons button { width: 32px; height: 32px; border: 1px solid transparent; background: none; font-size: 19px; cursor: pointer; }
.emoticons button:hover { background: var(--destaque); border-color: var(--destaque-borda); }

/* ---------------------------------------------------------------- formularios em janela */

.painel { padding: 14px 16px; overflow: auto; }
.painel h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 600; color: var(--texto-titulo); border-bottom: 1px solid var(--linha); padding-bottom: 4px; }
.painel section + section { margin-top: 18px; }
.linha-foto { display: flex; align-items: center; gap: 12px; }
.linha-foto .acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.form-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.form-linha .campo { flex: 1; min-width: 130px; margin-bottom: 0; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 6px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.tabela th { font-weight: 600; color: var(--texto-suave); font-size: 12px; }
.tabela td.acoes { white-space: nowrap; text-align: right; }
.tabela td.acoes .botao { padding: 2px 8px; min-height: 22px; font-size: 12px; }
.tabela tr.inativo td { color: var(--texto-suave); }
.etiqueta { display: inline-block; padding: 0 6px; border-radius: 8px; background: #e3eefa; font-size: 11px; color: var(--texto-titulo); }

/* ---------------------------------------------------------------- avisos */

#avisos { position: absolute; right: 12px; bottom: 12px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; }
.aviso {
  display: flex; gap: 10px;
  width: 250px;
  padding: 10px;
  background: linear-gradient(#ffffff, #dcebf9);
  border: 1px solid var(--borda-janela);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(10, 40, 80, .35);
  cursor: pointer;
  text-align: left;
  animation: subir .25s ease-out;
}
.aviso-texto { min-width: 0; }
.aviso-texto b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-texto span { display: block; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes subir { from { transform: translateY(16px); opacity: 0; } }

/* ---------------------------------------------------------------- barra de tarefas */

#barra-tarefas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: linear-gradient(#3a76bd, var(--barra) 45%, #163f72);
  border-top: 1px solid #6c9fd8;
}
#barra-botoes { flex: 1; display: flex; gap: 4px; min-width: 0; overflow: hidden; }
#barra-relogio { color: #fff; font-size: 12px; padding: 0 6px; }
.tarefa {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  max-width: 180px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.tarefa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa:hover { background: rgba(255, 255, 255, .26); }
.tarefa.ativa { background: rgba(0, 0, 0, .25); }
.tarefa.piscando { animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { background: #f0901c; border-color: #ffc27a; } }

/* ---------------------------------------------------------------- celular */

@media (max-width: 700px) {
  .janela {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    resize: none;
  }
  .chat-avatares { display: none; }
  #avisos { left: 12px; }
  .aviso { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .janela.tremendo, .aviso, .tarefa.piscando { animation: none; }
}