/* 1.4.50: channel brand marks on the attendance screen. */
.cb-mark{--cb:22px;position:relative;display:inline-grid;place-items:center;flex:0 0 auto;box-sizing:border-box;width:var(--cb);height:var(--cb);
  border-radius:28%;background:var(--cb-bg,#6b5d8f);color:var(--cb-ink,#fff);font-style:normal;line-height:1;vertical-align:middle;overflow:hidden}
.cb-xs{--cb:16px}.cb-sm{--cb:22px}.cb-md{--cb:28px}.cb-lg{--cb:34px}
.cb-mark b{font-size:calc(var(--cb) * .42);font-weight:800;letter-spacing:-.2px;color:inherit}
.cb-mark svg{width:62%;height:62%}
.cb-mark.cb-logo{background:transparent;border-radius:0;overflow:visible}
.cb-mark.cb-logo img{display:block;width:100%;height:100%;object-fit:contain}
/* On the avatar the logo sits on a white disc, so it reads over any avatar color. */
.att-avatar>.cb-mark.cb-logo{background:#fff;border-radius:50%;padding:2px}
.cb-whatsapp{--cb-bg:#128c4a}
.cb-instagram{--cb-bg:linear-gradient(135deg,#f0812f,#d62976 48%,#7b35b8)}
.cb-messenger{--cb-bg:#0866ff}
.cb-telegram{--cb-bg:#1c86bd}
.cb-tiktok{--cb-bg:#121212}
.cb-mercado_livre{--cb-bg:#ffe600;--cb-ink:#2d3277}
.cb-shopee{--cb-bg:#d9431f}
.cb-marketplace{--cb-bg:#7c3aed}
.cb-reclame_aqui{--cb-bg:#2f8a3e}
.cb-voice{--cb-bg:#7547ff}
.cb-email{--cb-bg:#1677d8}
.cb-sms{--cb-bg:#0f8077}
.cb-social{--cb-bg:#c0267a}
.cb-other{--cb-bg:#6b5d8f}

/* Queue: badge on the avatar and the channel in the item line. */
.cp-app .att-item span.cb-mark,.att-item span.cb-mark{display:inline-grid;margin:0;overflow:hidden;white-space:normal;font-size:inherit;color:var(--cb-ink,#fff)}
.att-avatar>.cb-mark{position:absolute;right:-5px;bottom:-5px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(29,18,56,.18)}
.att-avatar>.cb-mark{--cb:24px}
.cp-app .att-item small .att-item-channel,.att-item small .att-item-channel{display:inline-flex;align-items:center;gap:4px;margin:0;overflow:visible;vertical-align:-3px;
  font-size:inherit;font-weight:700;color:var(--av-text,#665c8b)}

/* Header: large mark with the channel name. */
.cp-app .att-detail-head #att-heading>span.att-head-channel{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 9px;min-width:0;font-size:13.5px;font-weight:600;color:var(--av-text,#665c8b)}
.cp-app .att-detail-head #att-heading>span.att-head-channel b{font-size:15px;font-weight:800;color:var(--av-ink,#1d1238)}
.cp-app .att-detail-head #att-heading>span.att-head-channel .att-head-origin{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Reply area: where the answer goes out. */
.att-reply-via{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;box-sizing:border-box;margin:0 0 6px;padding:3px 10px 3px 6px;background:#fff;
  border:1px solid var(--av-line,#e7e1f3);font-size:12px;color:var(--av-muted,#7a7096);flex-wrap:wrap;row-gap:2px;border-radius:12px;overflow:hidden}
.att-reply-via[hidden]{display:none}
.att-reply-via b{color:var(--av-ink,#1d1238);font-weight:800}
.att-reply-via>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-reply-via>.cb-mark,.att-reply-via>b{flex:0 0 auto}

/* Channel filter above the queue. */
.att-channel-filter{display:flex;gap:6px;margin:0 14px 10px;padding:0 0 2px;overflow-x:auto;scrollbar-width:thin;flex:0 0 auto}
.att-channel-filter[hidden]{display:none}
.att-channel-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:34px;padding:0 10px 0 6px;border:1px solid var(--av-line,#e7e1f3);border-radius:999px;
  background:#fff;color:var(--av-ink,#1d1238);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.att-channel-chip:hover{border-color:#cfc2ef}
.att-channel-chip:focus-visible{outline:2px solid var(--av-violet,#6a3df0);outline-offset:2px}
.att-channel-chip.active{border-color:var(--av-violet,#6a3df0);background:#f4f0ff;box-shadow:0 0 0 3px rgba(106,61,240,.12)}
.att-channel-chip>b{min-width:14px;text-align:center;color:var(--av-muted,#7a7096)}
.att-channel-chip.active>b{color:var(--av-violet,#6a3df0)}
.att-channel-all{padding-left:4px}
@media(max-width:680px){.att-reply-via>span:first-child{display:none}}
/* Phones: the avatar is hidden, so the mark goes before the customer name. */
.cp-app .att-item strong>span.cb-mark,.att-item strong>span.cb-mark{display:none}
@media(max-width:650px){.cp-app .att-item strong>span.cb-mark,.att-item strong>span.cb-mark{display:inline-grid;margin:0 5px 0 0;vertical-align:-3px}}
@media(forced-colors:active){.cb-mark{border:1px solid CanvasText}}