/* Atendimentos 1.4.24 · repaginação visual. Só aparência: os ids, filtros e
   comportamentos da tela continuam os mesmos (attendance.css segue como base). */
.cp-app .attendance-screen{--av-ink:#1d1238;--av-text:#4a3f66;--av-muted:#8a80a3;--av-line:#ece7f4;--av-soft:#f7f5fc;--av-violet:#6a3df0;
  --av-brand:linear-gradient(100deg,#ff7a1a 0%,#e5179b 38%,#6a3df0 74%,#2f8cff 100%);
  background:#f4f2fa;border-top:0;font-family:'Nunito Sans',Arial,sans-serif}
@media(min-width:1400px){.cp-app .attendance-screen{grid-template-columns:216px minmax(300px,360px) minmax(0,1fr)}}

/* ---------- filtros ---------- */
.cp-app .attendance-filters{background:#fff;border-right:1px solid var(--av-line);padding:22px 14px}
.attendance-title{margin:0 4px 14px}
.attendance-title>span{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#a093bd}
.attendance-title h2{margin:4px 0 0;font-size:22px;line-height:1.15;letter-spacing:-.5px;font-weight:800;color:var(--av-ink)}
.attendance-title #tag-settings{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:14px 0 0;padding:9px 12px;border-radius:12px;
  border:1px solid #e3dbf5;background:#faf8ff;color:#5b3fb0;font:inherit;font-size:13px;font-weight:800;box-shadow:none}
.attendance-title #tag-settings:hover{background:#f1ebff;border-color:#cdbcf3}
.att-period{display:flex;flex-direction:column;gap:6px;margin:0 4px 16px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#a093bd}
.att-period select{width:100%;padding:9px 10px;border-radius:11px;border:1px solid var(--av-line);background:var(--av-soft);color:var(--av-ink);font:inherit;font-size:13px;font-weight:700;text-transform:none;letter-spacing:0}
.att-filters-label{display:block;margin:6px 6px 6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#a093bd}
.cp-app .att-filter{position:relative;margin:2px 0;padding:10px 10px 10px 12px;border-radius:12px;color:var(--av-text);font-size:13.5px;font-weight:700;transition:background .15s}
.cp-app .att-filter:hover{background:var(--av-soft)}
.cp-app .att-filter i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f3effb;color:#7a68a8;font-size:12px;flex:none}
.cp-app .att-filter b{min-width:24px;text-align:center;padding:2px 8px;border-radius:999px;background:#f1edf9;color:#6b5f8c;font-size:11.5px}
.cp-app .att-filter.active{background:#f3eeff;color:#3f1d9b}
.cp-app .att-filter.active::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--av-brand)}
.cp-app .att-filter.active i{background:#fff;color:var(--av-violet);box-shadow:0 2px 8px rgba(106,61,240,.18)}
.cp-app .att-filter.active b{background:var(--av-violet);color:#fff}
.cp-app .att-filter-open{margin-bottom:8px;border:1px dashed #d9cdf5}
.cp-app .att-divider{margin:14px 6px;border-top:1px solid var(--av-line)}
.cp-app .att-legend{display:flex;flex-direction:column;gap:6px;margin:0 6px;font-size:12px;color:var(--av-muted)}

/* ---------- lista ---------- */
.cp-app .attendance-list{background:#faf9fd;border-right:1px solid var(--av-line)}
.cp-app .att-list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:20px 16px 10px;border:0;background:transparent}
.cp-app .att-list-head h3{margin:0;font-size:17px;font-weight:800;color:var(--av-ink)}
.cp-app .att-list-head p{margin:3px 0 0;font-size:12.5px;color:var(--av-muted)}
.cp-app .att-list-head button{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1px solid var(--av-line);background:#fff;color:#5b3fb0;font-size:16px;cursor:pointer}
.cp-app .att-list-head button:hover{border-color:#cdbcf3;background:#f6f2ff}
.cp-app .attendance-list .att-search{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:0 12px;height:42px;border-radius:13px;border:1px solid var(--av-line);background:#fff;color:#a093bd}
.cp-app .attendance-list .att-search:focus-within{border-color:var(--av-violet);box-shadow:0 0 0 4px rgba(106,61,240,.12)}
.cp-app .attendance-list .att-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:13.5px;color:var(--av-ink);padding:0}
.cp-app .att-items{padding:2px 10px 14px}
.cp-app .att-item{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;margin:0 0 8px;padding:12px;border:1px solid transparent;border-radius:16px;background:#fff;
  box-shadow:0 2px 10px rgba(29,18,56,.04);color:var(--av-ink);transition:border-color .15s,box-shadow .15s}
.cp-app .att-item:hover{background:#fff;border-color:#e2d9f6}
.cp-app .att-item.selected{background:#fff;border-color:var(--av-violet);box-shadow:0 0 0 3px rgba(106,61,240,.12),0 6px 18px rgba(29,18,56,.08)}
.cp-app .att-item strong{font-size:14px;font-weight:800;color:var(--av-ink)}
.cp-app .att-item span{color:var(--av-text);font-size:13px}
.cp-app .att-item small{color:var(--av-muted);font-size:11.5px}
.att-avatar,.att-head-avatar{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px;
  background:linear-gradient(135deg,#8b5cf6,#6a3df0);margin:0!important;overflow:visible!important}
.att-avatar.whatsapp,.att-head-avatar.whatsapp{background:linear-gradient(135deg,#22c55e,#15803d)}
.att-avatar.voice,.att-head-avatar.voice{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.att-avatar.instagram,.att-head-avatar.instagram{background:linear-gradient(135deg,#f472b6,#be185d)}
.att-avatar.email,.att-head-avatar.email{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.att-avatar.facebook,.att-head-avatar.facebook{background:linear-gradient(135deg,#fb923c,#c2410c)}
.cp-app .att-item .att-avatar{display:grid;place-items:center;margin:0;overflow:visible;white-space:normal;color:#fff;font-size:14px;line-height:1}
.att-avatar .att-channel{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  background:#fff;color:#4a3f66;font-size:10px;font-style:normal;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cp-app .att-item aside{gap:8px}
.cp-app .att-priority{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800}
.att-ticket-chip{margin-right:2px}

/* ---------- detalhe ---------- */
.cp-app .attendance-detail{background:#fbfaff}
.cp-app .att-detail-head{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:center;gap:16px;padding:16px 20px;background:#fff;border-bottom:1px solid var(--av-line)}
.cp-app .att-detail-head #att-heading{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;align-items:center}
.att-head-avatar{grid-row:1/4;width:50px;height:50px;font-size:16px}
.cp-app .att-detail-head .att-head-avatar{color:#fff;font-size:16px;font-weight:800}
.cp-app .att-detail-head #att-heading>span:not(.att-head-avatar){font-size:12.5px;color:var(--av-muted);font-weight:700}
.cp-app .att-detail-head span .att-channel{width:20px;height:20px;border-radius:6px;font-size:10px}
.cp-app .att-detail-head h2{margin:2px 0 1px;font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--av-ink)}
.cp-app .att-detail-head #att-heading>p{font-size:12.5px;color:var(--av-muted)}
.cp-app .att-detail-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0;max-width:640px}
.cp-app .att-detail-actions select{width:auto;max-width:230px;height:40px;padding:0 34px 0 12px;border-radius:12px;border:1px solid var(--av-line);background-color:var(--av-soft);color:var(--av-ink);font:inherit;font-size:13px;font-weight:700}
.cp-app .take-attendance{height:40px;padding:0 16px;border-radius:12px;font:inherit;font-size:13.5px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s}
.cp-app #att-take{background:var(--av-violet);color:#fff;box-shadow:0 8px 20px rgba(106,61,240,.25)}
.cp-app #att-take:hover:not(:disabled){filter:brightness(1.06)}
.cp-app #att-ticket{background:#fff;color:#5b3fb0;border-color:#ddd2f5}
.cp-app #att-ticket:hover:not(:disabled){background:#f6f2ff}
.cp-app #att-finish{background:var(--av-brand);background-size:160% 100%;color:#fff;box-shadow:0 8px 22px rgba(229,23,155,.25)}
.cp-app #att-finish:hover:not(:disabled){background-position:100% 50%}
.cp-app .att-info{gap:6px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--av-line)}
.cp-app .att-info>span:not(.att-priority){border-radius:999px;background:var(--av-soft);border:1px solid var(--av-line);color:var(--av-text);font-size:12px;font-weight:700;padding:4px 10px}

/* conversa */
.cp-app .att-messages{gap:12px;padding:20px 24px;background:radial-gradient(rgba(106,61,240,.05) 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(180deg,#fbfaff,#f5f2fc)}
.cp-app .att-message{max-width:72%;padding:11px 14px;border-radius:18px 18px 18px 6px;background:#fff;border:1px solid #ece6f7;box-shadow:0 2px 8px rgba(29,18,56,.05);color:var(--av-ink);font-size:14px;line-height:1.5}
.cp-app .att-message.outbound{border:0;border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,#7b4dff,#5b2fd8);color:#fff;box-shadow:0 6px 18px rgba(91,47,216,.22)}
.cp-app .att-message.note{border:1px dashed #e7cf7a;background:#fffaeb;color:#7a5a12;box-shadow:none}
.cp-app .att-message small{margin-top:6px;font-size:11px;opacity:.75}
.cp-app .att-attachment{border-radius:12px}

/* resposta */
.cp-app .att-quick-replies{display:flex;align-items:center;gap:10px;margin:0;padding:10px 20px 0;background:#fff;border-top:1px solid var(--av-line);font-size:12.5px;font-weight:700;color:var(--av-muted)}
.cp-app .att-quick-replies select{flex:1;min-width:0;height:36px;border-radius:10px;border:1px solid var(--av-line);background:var(--av-soft);padding:0 10px;font:inherit;font-size:13px;color:var(--av-ink)}
.cp-app .att-compose{grid-template-columns:minmax(0,1fr) 128px;gap:10px;padding:10px 20px 14px;background:#fff;border-top:0}
.cp-app .att-compose>div{border:1px solid var(--av-line);border-radius:16px;background:var(--av-soft);padding:8px 10px 6px;transition:border-color .15s,box-shadow .15s}
.cp-app .att-compose>div:focus-within{border-color:var(--av-violet);background:#fff;box-shadow:0 0 0 4px rgba(106,61,240,.1)}
.cp-app .att-compose textarea{border:0;background:transparent;padding:6px 4px;min-height:58px;outline:none;color:var(--av-ink);font-size:14px}
.cp-app .att-compose-tools>button{background:#fff;border:1px solid var(--av-line);border-radius:9px;color:#5b3fb0}
.cp-app .att-compose .cta,.cp-app #att-send{height:auto;min-height:62px;border:0;border-radius:16px;background:var(--av-brand);background-size:160% 100%;color:#fff;font:inherit;font-size:13.5px;font-weight:800;box-shadow:0 10px 24px rgba(229,23,155,.22);cursor:pointer}
.cp-app #att-send:hover:not(:disabled){background-position:100% 50%}
.cp-app .att-transfer{display:flex;align-items:center;gap:10px;padding:0 20px 14px;background:#fff}
.cp-app .att-transfer label{display:flex;align-items:center;gap:8px;flex:1;font-size:12.5px;font-weight:700;color:var(--av-muted)}
.cp-app .att-transfer select{flex:1;min-width:0;height:38px;border-radius:11px;border:1px solid var(--av-line);background:var(--av-soft);font:inherit;font-size:13px;color:var(--av-ink)}
.cp-app .att-transfer button{height:38px;padding:0 14px;border-radius:11px;border:1px solid #ddd2f5;background:#fff;color:#5b3fb0;font:inherit;font-weight:800;cursor:pointer}

/* lateral: notas e encerramento */
.cp-app .att-agent-sidebar{background:#fff;border-left:1px solid var(--av-line)}
.cp-app .att-internal-notes{padding:16px}
.cp-app .att-internal-notes h3{font-size:14px;font-weight:800;color:var(--av-ink)}
.cp-app .att-internal-notes button,#att-note-save{white-space:nowrap;padding:7px 10px;border-radius:10px;border:1px solid #ddd2f5;background:#faf8ff;color:#5b3fb0;font-weight:800}
.cp-app .att-agent-sidebar .att-tabs{border-top:1px solid var(--av-line);background:#fcfbff}
.cp-app .att-tabs>summary{font-weight:800;color:var(--av-ink)}
.cp-app .att-tabs>summary>span{color:var(--av-muted)}

/* Celular e telas estreitas: some o avatar, como antes sumia o ícone do canal */
@media(max-width:1000px){.cp-app .att-item{grid-template-columns:36px minmax(0,1fr)}.att-avatar{width:36px;height:36px;font-size:12px}.cp-app .att-item>aside{grid-column:2}}
@media(max-width:1150px){.cp-app .att-detail-head{grid-template-columns:minmax(0,1fr)}.cp-app .att-detail-actions{justify-content:flex-start;max-width:none}}
@media(max-width:680px){.cp-app .att-detail-head #att-heading{grid-template-columns:minmax(0,1fr)}.att-head-avatar{display:none!important}.cp-app .att-compose{grid-template-columns:minmax(0,1fr) 92px}}
@media(max-width:650px){.cp-app .att-item .att-avatar{display:none}.cp-app .att-item{display:block}}
@media(max-width:1300px){.cp-app .att-filter i{display:none}.cp-app .att-filter{padding-left:10px}}
@media(max-width:680px){.cp-app .att-detail-actions select{max-width:100%;width:100%}.cp-app .att-detail-actions{gap:6px}}