:root{
  --bg:#0b1220;
  --card:#111b2d;
  --muted:#8aa0c2;
  --text:#e7eefc;
  --accent:#4ea1ff;
  --danger:#ff5c7a;
  --ok:#4fe39d;
  --border:rgba(255,255,255,.08);
  --shadow:0 8px 22px rgba(0,0,0,.25);
  --radius:14px;
  --font:'Manrope';
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: #0d2d3c;
  color:var(--text);
  font-family:var(--font);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{ width: 100%; margin:0 auto;padding:20px}

.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(11,18,32,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.topbar__inner{
  width:100%;margin:0 auto;
  padding:12px 18px;
  display:flex;align-items:center;gap:16px;justify-content:space-between;
}
.brand a{font-weight:700;letter-spacing:.2px}
.brand img { width: auto; max-height: 30px; position:relative; display:inline-block; }

.nav{display:flex;gap:14px}
.nav a{color:var(--muted);padding:8px 10px;border-radius:10px; font-size:12px; }
.nav a:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}

.user{display:flex;align-items:center;gap:10px}
.user__name{color:var(--muted);font-size:12px}

.card{
  background:rgba(17,27,45,.85);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card__body{padding:16px}

.h1{font-size:20px;margin:0 0 12px}
.h2{font-size:16px;margin:0 0 12px;color:var(--muted)}

.row{display:flex;gap:12px;flex-wrap:wrap, justify-content:space-between;align-items:center;}
.botoes_row { display:flex;gap:10px;align-items:center; }

.msgLink{
  color: var(--accent);
  text-decoration: underline;
  word-break: break-word;
}
.msgLink:hover{ opacity: .9; }

.unreadMarker{
  margin: 10px 0;
  text-align:center;
  font-size:12px;
  color: var(--muted);
  opacity:.9;
}
.msgLink{ color: var(--accent); text-decoration: underline; word-break: break-word; }

.ticks{
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  opacity:.95;
}
.ticks svg{ width:18px;height:18px; }

.ticks--queued{ color: rgba(255,255,255,.55); }
.ticks--sent{ color: rgba(255,255,255,.65); }
.ticks--delivered{ color: rgba(255,255,255,.75); }
.ticks--read{ color: #4fb3ff; } /* azul */
.ticks--failed{ color:#ff6b6b; font-weight:800; }

/*MENU HOVER*/
.bubble{ position:relative; }

.msgMore{
  position:absolute;
  top:8px;
  right:10px;
  opacity:0;
  transition: opacity .15s ease;
}

.bubble:hover .msgMore{ opacity:1; }

.msgMore__btn{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.msgMore__btn::-webkit-details-marker{ display:none; }

.msgMore__menu{
  margin-top:6px;
  min-width: 180px;
  padding:8px;
  border-radius:12px;
  background: rgba(10,15,25,.95);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.msgMore__menu a{
  display:block;
  padding:7px 8px;
  border-radius:10px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.msgMore__menu a:hover{
  background: rgba(255,255,255,.08);
}


.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;color:var(--muted)}
.input,.textarea,select{
  width:100%;
  background:rgba(0,0,0,.2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-family: var(--font);
}
.textarea{min-height:90px;resize:vertical}
.input:focus,.textarea:focus,select:focus{border-color:rgba(78,161,255,.55);box-shadow:0 0 0 3px rgba(78,161,255,.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(78,161,255,.15);
  color:var(--text);
  cursor:pointer;
  font-size: 12px;
}
.btn:hover{background:rgba(78,161,255,.22)}
.btn--ghost{background:transparent}
.btn--danger{background:rgba(255,92,122,.18)}
.btn--danger:hover{background:rgba(255,92,122,.26)}

.alert{
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  margin:12px 0;
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.alert--ok{border-color:rgba(79,227,157,.35);background:rgba(79,227,157,.08)}
.alert--err{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.08)}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.table th{color:var(--muted);text-align:left;font-weight:600}

/* Kanban */
.kanban{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:10px;
  margin-top: 20px;
}
.column{
  min-width:290px;
  max-width:290px;
  flex:0 0 290px;
}
.column__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
}
.column__title{font-weight:700;font-size:13px}
.column__count{color:var(--muted);font-size:12px}
.column__body{padding:10px;min-height:220px}

.cardLead{
  --lead-bg: rgba(0,0,0,.18);
  background: var(--lead-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
  cursor:grab;
  position:relative;
}

.cardLead--unread{
  --lead-bg: rgba(78,161,255,.10);
  border-color: rgba(78,161,255,.55);
  background: var(--lead-bg);
  box-shadow: 0 0 0 1px rgba(78,161,255,.18) inset;
}

.cardLead--unread::after{
  content:"";
  position:absolute;
  top:0px;
  right:0px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(78,161,255,.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
.cardLead:active{cursor:grabbing}
.cardLead small { margin-top:12px;display:flex;justify-content:space-between;gap:10px; }
.cardLead small a { color:var(--accent); font-weight:700; }
.cardLead small .nao_lidas { color:var(--text);background:rgba(255,255,255,.08);padding:2px 8px;border-radius:999px; }
.cardLead small .ja_lidas { color:var(--muted); }
.cardLead__top{display:flex;justify-content:space-between;gap:10px}
.cardLead__who{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:28px;height:28px;border-radius:999px;flex:0 0 28px;object-fit:cover;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.avatar--ph{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.cardLead__name{font-weight:700;font-size:13px}
.cardLead__time{color:var(--muted);font-size:11px;white-space:nowrap}
.cardLead__msg{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
  line-height:1.35;

  /* clamp 3 linhas */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

  /* fallback */
  max-height: calc(1.35em * 3);

  overflow:hidden;
  position:relative;
}
.dropzone--over{outline:2px dashed rgba(78,161,255,.5);outline-offset:4px;border-radius:14px}

/* Chat */
.chatWrap{display:grid;grid-template-columns:1fr;gap:14px}
@media(max-width:980px){.chatWrap{grid-template-columns:1fr}}

.chat{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(0,0,0,.15);
}
.chat__head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.chatHead__who{display:flex;align-items:center;gap:12px;min-width:0}
.avatar--lg{width:38px;height:38px;flex:0 0 38px}
.chat__title{font-weight:700}
.chat__body{padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto}

.bubble{max-width:78%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);line-height:1.35;font-size:13px}
.bubble--in{background:rgba(255,255,255,.05);align-self:flex-start}
.bubble--out{background:rgba(78,161,255,.15);align-self:flex-end}
.bubble__meta{margin-top:6px;color:var(--muted);font-size:11px;display:flex;justify-content:flex-end;gap:8px}

/* Linha da bolha (para suportar avatar em mensagens recebidas) */
.bubbleRow{display:flex;gap:8px;align-items:flex-end}
.bubbleRow--in{justify-content:flex-start}
.bubbleRow--out{justify-content:flex-end}
.bubbleRow .bubble{align-self:auto}
.bubbleRow__avatar{flex:0 0 auto}
.avatar--msg{width:26px;height:26px;flex:0 0 26px}

.chat__composer{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:10px}
.chat__composer .input{flex:1}

.sidebar{display:flex;flex-direction:column;gap:14px}

.small{color:var(--muted);font-size:12px}

.bubble__sender{ font-size:12px; opacity:.85; margin-bottom:6px; font-weight:600; }
.bubble__content{ line-height:1.35; }

.ticks{ margin-left:8px; font-size:12px; opacity:.9; }
.ticks--read{ color:#4fb3ff; }      /* ✓✓ azul */
.ticks--delivered{ color:#cbd5e1; } /* ✓✓ cinza */
.ticks--sent{ color:#cbd5e1; }      /* ✓ */
.ticks--clock{ opacity:.8; }
.ticks--failed{ color:#ff6b6b; font-weight:700; }

.msgSticker{ max-width:160px; max-height:160px; display:block; }
.msgMediaVideo{ width:320px; max-width:100%; border-radius:12px; }
.msgMediaAudio{ width:320px; max-width:100%; }
.msgDoc{ display:inline-block; padding:8px 10px; border-radius:10px; text-decoration:none; }
.msgCaption{ margin-top:8px; opacity:.95; }
.msgMediaFallback{ opacity:.8; font-style:italic; }

/* ==== Audio player moderno ==== */
.audioP{
  display:flex;
  align-items:center;
  gap:10px;
  width:320px;
  max-width:100%;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
.audioP__el{ display:none; }
.audioP__btn{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.15);
  color:var(--text);
  cursor:pointer;
}
.audioP__btn:hover{ background:rgba(255,255,255,.08); }
.audioP__seek{
  flex:1;
  accent-color: var(--accent);
}
.audioP__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:11px;
  color:var(--muted);
  min-width:52px;
  text-align:right;
}
.audioP__dl{
  font-size:11px;
  color:var(--accent);
  text-decoration:underline;
  white-space:nowrap;
}

/* ==== Lightbox ==== */
.lb{ position:fixed; inset:0; z-index:9999; }
.lb--hidden{ display:none; }
.lb__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
.lb__panel{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lb__img{
  max-width:min(980px, 92vw);
  max-height:92vh;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
.lb__close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  color:var(--text);
  cursor:pointer;
  z-index:2;
}
.lb__close:hover{ background:rgba(255,255,255,.10); }
.lbLock{ overflow:hidden; }