/* Pestaña «Slack» y avisos emergentes. Reusa la lista y la conversación de WhatsApp (.wa, .chat, .msg). */

:root { --slack: #b48ee8; }
.c-slack { --c: var(--slack); }
#view-slack { position: relative; --c: var(--slack); }
#view-slack:not([hidden]) { animation: viewIn 0.32s var(--ease); }

.sl-listhead { display: flex; flex-direction: column; gap: 10px; }
.sl-team { margin: 0; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sl-av .ico { width: 24px; height: 24px; }
.sl-av.sl-channel, .sl-av.sl-group { border-radius: 14px; color: var(--slack); }
.msg.sl-mention { box-shadow: inset 4px 0 0 var(--slack); }
.sl-thread { margin-top: 6px; color: var(--slack); font-size: 0.85rem; }
#view-slack .msg.me { background: #5b3f8c; }
#view-slack .cl-confirm-body { max-height: 14em; font-family: var(--sans); font-size: 1.05rem; }
#view-slack .cl-confirm-actions { display: flex; gap: 12px; margin-top: 16px; }
#view-slack .cl-confirm-actions .cl-btn { flex: 1; }
#view-slack .cl-btn.allow { background: var(--slack); color: #140b22; }

/* ───────── avisos emergentes: arriba, grandes, se van solos a los 8 s */
.pops {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(720px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.pop {
  pointer-events: auto; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 14px 18px;
  border: 0; border-radius: 20px; background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.55), inset 0 0 0 1px var(--line), inset 5px 0 0 var(--pc);
  animation: popIn 0.32s var(--ease);
}
.pop.out { opacity: 0; transform: translateY(-14px); transition: opacity 0.25s, transform 0.25s; }
.pop-wa { --pc: #31c46c; }
.pop-slack { --pc: var(--slack); }
.pop-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--pc); }
.pop-ico .ico { width: 26px; height: 26px; }
.pop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pop-src { color: var(--pc); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; }
.pop-title { font-size: 1.15rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-text { color: var(--muted); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pop-x { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; color: var(--faint); font-size: 1.2rem; }
.pop-x:active { background: var(--raise); }
@keyframes popIn { from { opacity: 0; transform: translateY(-18px) scale(0.98); } to { opacity: 1; transform: none; } }

.pops-btn.off .ico { color: var(--faint); }
.pops-btn.off small { color: var(--faint); }
.pops-btn.off .ico path:first-child { stroke-dasharray: 2 2; }