/* 1.4.240 (Geh): Atendimentos adaptável ao computador (largura E altura úteis). Marcado por attendance-fit.js em .attendance-screen
   (data-fit-w = wide|tight|narrow · data-fit-h = tall|compact|short). Só apresentação, por cima de attendance.css/attendance-v2.css.
   "tall" e "wide" não mudam nada: o visual de sempre. */

/* ===== Largura: tight e narrow — os filtros viram uma faixa no topo e a fila/conversa ganham o espaço ===== */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]){grid-template-rows:auto minmax(0,1fr)}
.cp-app .attendance-screen[data-fit-w="tight"]{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}
.cp-app .attendance-screen[data-fit-w="narrow"]{grid-template-columns:minmax(210px,250px) minmax(0,1fr)}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"])>.attendance-filters{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
  overflow:visible;padding:5px 14px;border-right:0;border-bottom:1px solid var(--av-line)}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"])>.attendance-list{grid-column:1;grid-row:2}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"])>.attendance-detail{grid-column:2;grid-row:2}
/* o título some, mas o botão de Tabulações continua ao alcance (fica no fim da faixa) */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .attendance-title{display:contents}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .attendance-title>span,
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .attendance-title>h2{display:none}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .attendance-title #tag-settings{order:90;flex:none;width:auto;margin:0 0 0 2px;padding:4px 12px;white-space:nowrap}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filters-label,
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-divider{display:none}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-period{flex:none;flex-direction:row;align-items:center;gap:8px;margin:0 6px 0 0;white-space:nowrap}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-period select{width:auto;padding:4px 10px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filter{flex:none;width:auto;margin:0;padding:4px 9px;white-space:nowrap;font-size:12.5px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filter span{white-space:nowrap;max-width:none}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filter.active::before{display:none}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filter-open{margin:0}
/* a legenda de cores fica no fim da faixa (só some na largura mais estreita, onde viraria uma terceira linha); o rótulo do período só ocupa espaço (o select continua com o nome acessível) */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-legend{flex:none;flex-direction:row;gap:12px;margin:0 0 0 auto;white-space:nowrap;font-size:11.5px}
.cp-app .attendance-screen[data-fit-w="narrow"] .att-legend{display:none}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-period{font-size:0}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-period select{font-size:12.5px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-filter i{display:none}
/* a fila ocupa menos: avatar menor e menos respiro */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-list-head{padding:12px 12px 8px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-list-head h3{font-size:15px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .attendance-list .att-search{margin:0 10px 8px;height:38px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-item{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:10px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-item>aside{grid-column:2}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-item .att-avatar{width:38px;height:38px;font-size:12.5px}
/* cabeçalho do atendimento: título e botões na mesma linha enquanto couberem; senão os botões descem */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-detail-head{grid-template-columns:minmax(0,1fr);gap:8px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-detail-actions{justify-content:flex-start;max-width:none}
.cp-app .attendance-screen[data-fit-w="tight"] .att-detail-head{grid-template-columns:minmax(0,1fr) auto}
.cp-app .attendance-screen[data-fit-w="tight"] .att-detail-actions{justify-content:flex-end;max-width:440px}
/* os quatro controles do atendimento (assumir, situação, ticket, encerrar) cabem em uma linha */
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-detail-actions{gap:6px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .att-detail-actions select{max-width:150px}
.cp-app .attendance-screen:is([data-fit-w="tight"],[data-fit-w="narrow"]) .take-attendance{padding-left:12px;padding-right:12px}
/* painel do operador (notas e tabulação): ao lado enquanto a conversa tem largura; empilhado embaixo quando não */
.cp-app .attendance-screen[data-fit-w="tight"] .att-work-area{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(0,1fr)}
.cp-app .attendance-screen[data-fit-w="tight"] .att-agent-sidebar{display:flex;height:auto;max-height:none;border-left:1px solid var(--av-line);border-top:0}
.cp-app .attendance-screen[data-fit-w="tight"] .att-agent-sidebar .att-tabs{border-left:0}
.cp-app .attendance-screen[data-fit-w="narrow"] .att-work-area{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.cp-app .attendance-screen[data-fit-w="narrow"] .att-agent-sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:150px;max-height:30dvh;border-left:0;border-top:1px solid var(--av-line)}
.cp-app .attendance-screen[data-fit-w="narrow"] .att-agent-sidebar .att-tabs{border-top:0;border-left:1px solid var(--av-line);max-height:none}

/* ===== Altura: compact e short — a conversa é o que mais importa; o entorno encolhe ===== */
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head{padding:8px 16px;gap:8px}
/* título em duas linhas: nome; canal + protocolo/assunto lado a lado */
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head #att-heading{grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:0}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head .att-head-avatar{grid-row:1/3;grid-column:1}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head h2{grid-column:2/-1;grid-row:1}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head #att-heading>span:not(.att-head-avatar){grid-column:2;grid-row:2}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head #att-heading>p{grid-column:3;grid-row:2}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-head-avatar{width:36px;height:36px;font-size:13px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head h2{margin:0;font-size:17px;line-height:1.2}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-head #att-heading>p{margin:0;font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-actions{gap:6px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-actions select,
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .take-attendance{height:32px;padding-top:0;padding-bottom:0;font-size:12px;border-radius:10px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-detail-actions select{padding-left:10px;padding-right:28px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-info{padding:5px 16px;gap:5px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-info>span:not(.att-priority){padding:2px 8px;font-size:11px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-priority{padding:2px 8px;font-size:10.5px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .attendance-detail>.sc-customer-card{padding:4px 16px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-head-channel{flex-wrap:nowrap;gap:2px 7px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-head-channel [class*="cb-"]{--cb:20px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-head-channel b{font-size:13px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .sc-customer-card .sc-customer-icon{width:24px;height:24px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .sc-customer-button{padding-top:4px;padding-bottom:4px;font-size:12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-messages{padding:10px 16px;gap:8px;min-height:120px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-message{padding:7px 12px;font-size:13px;max-width:82%}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-quick-replies{padding:6px 16px 0}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-quick-replies select{height:30px;font-size:12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-ai-suggest{margin:0;padding:4px 16px 0;background:#fff}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-ai-suggest-button{padding:3px 10px;font-size:11.5px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose{padding:6px 16px 8px;gap:8px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose>div{padding:4px 8px 2px;border-radius:12px}
/* "Resposta por" e emojis/anexo na mesma linha; o texto embaixo */
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose-tools{order:1;margin:0}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose #att-reply-via{order:2;flex:1 1 auto;margin:0;min-width:0}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose textarea{order:3;flex:1 1 100%}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose [data-pending-attachments]{order:4;flex:1 1 100%}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose-tools>button{padding:2px 7px;font-size:15px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose textarea{min-height:38px;padding:3px 4px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-compose .cta,
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) #att-send{min-height:46px;border-radius:12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-transfer{padding:0 16px 6px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-transfer select{height:32px;padding:0 8px;font-size:12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-transfer button{height:32px;font-size:12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-internal-notes{padding:10px 12px}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-internal-notes>p{margin:4px 0}
.cp-app .attendance-screen:is([data-fit-h="compact"],[data-fit-h="short"]) .att-agent-sidebar .att-tabs{padding:8px 12px}
/* short: mais um passo */
.cp-app .attendance-screen[data-fit-h="short"] .att-detail-head h2{font-size:15.5px}
.cp-app .attendance-screen[data-fit-h="short"] .att-head-avatar{width:30px;height:30px;font-size:12px}
.cp-app .attendance-screen[data-fit-h="short"] .att-info{padding:3px 16px}
.cp-app .attendance-screen[data-fit-h="short"] .sc-customer-label{display:none}
.cp-app .attendance-screen[data-fit-h="short"] .attendance-detail>.sc-customer-card{padding:2px 16px}
.cp-app .attendance-screen[data-fit-h="short"] .att-quick-replies{font-size:11px}
.cp-app .attendance-screen[data-fit-h="short"] .att-compose textarea{min-height:32px}
.cp-app .attendance-screen[data-fit-h="short"] .att-compose .cta,
.cp-app .attendance-screen[data-fit-h="short"] #att-send{min-height:40px}
/* respostas prontas e "Sugerir resposta com IA" na mesma linha (as sugestões, quando aparecem, ocupam a largura toda) */
.cp-app .attendance-screen[data-fit-h="short"] .att-conversation{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);align-content:stretch}
.cp-app .attendance-screen[data-fit-h="short"] .att-conversation>*{grid-column:1/-1}
.cp-app .attendance-screen[data-fit-h="short"] .att-conversation>.att-quick-replies{grid-column:1}
.cp-app .attendance-screen[data-fit-h="short"] .att-conversation>.att-ai-suggest{grid-column:2;align-self:stretch;display:flex;align-items:flex-end;flex-direction:column;justify-content:flex-end}
.cp-app .attendance-screen[data-fit-h="short"] .att-conversation>.att-ai-suggest:has(.att-ai-suggestions:not([hidden])){grid-column:1/-1;align-items:stretch}
.cp-app .attendance-screen[data-fit-h="short"] .att-quick-replies>.att-quick-label{display:none}
/* último recurso (telas muito baixas): a coluna do atendimento rola em vez de esmagar a conversa a zero */
.cp-app .attendance-screen[data-fit-h="short"] .attendance-detail{overflow-y:auto}
.cp-app .attendance-screen[data-fit-h="short"] .att-work-area{min-height:300px}

/* ===== Painel do operador recolhido (largura apertada E altura baixa): um botão abre notas e encerramento por cima da conversa ===== */
.att-fit-panel-toggle{display:none}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-work-area{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-messages{padding-top:30px}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-fit-panel-toggle{display:block;position:absolute;top:4px;right:16px;padding:3px 12px;border:1px solid #ddd2f5;border-radius:999px;
  background:#faf8ff;color:#5b3fb0;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;z-index:3}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-fit-panel-toggle:hover{background:#f1ebff}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-fit-panel-toggle:focus-visible{outline:3px solid #bfa8f5;outline-offset:2px}
.cp-app .attendance-screen[data-fit-agent="drawer"] .att-agent-sidebar{display:none}
.cp-app .attendance-screen[data-fit-agent="drawer"][data-fit-panel="open"] .att-agent-sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:absolute;left:0;right:0;bottom:0;
  height:min(70%,320px);max-height:none;z-index:4;border-top:1px solid var(--av-line);box-shadow:0 -12px 30px rgba(29,18,56,.14)}
.cp-app .attendance-screen[data-fit-agent="drawer"][data-fit-panel="open"] .att-agent-sidebar .att-tabs{border-top:0;border-left:1px solid var(--av-line);max-height:none}

/* ===== Barra superior mais baixa quando a janela é baixa (a conversa fica com mais altura) ===== */
@media(max-height:760px) and (min-width:651px){.cp-app .cp-main:has(.attendance-screen)>.cp-topbar{height:56px}}