.fabrion-atendimento {
    --at-border: var(--tblr-border-color, #e6e8eb);
    --at-muted: var(--tblr-secondary-color, #667085);
    --at-surface: var(--tblr-bg-surface, #fff);
    min-height: calc(100vh - 170px);
}

.atendimento-shell {
    display: flex;
    flex-direction: column;
    min-height: inherit;
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: var(--tblr-border-radius-lg, .5rem);
    overflow: hidden;
}

.atendimento-header,
.atendimento-chat-toolbar,
.atendimento-contact-info > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.atendimento-header {
    min-height: 72px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--at-border);
}

.atendimento-header h1 { margin: 0; font-size: 1.25rem; }
.atendimento-header p { margin: .2rem 0 0; color: var(--at-muted); }
.atendimento-header-actions { display: flex; align-items: center; gap: .75rem; }
.atendimento-channel-health { display: inline-flex; align-items: center; gap: .5rem; color: var(--at-muted); font-size: .875rem; }
.atendimento-health-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #f59f00; }
.atendimento-channel-health.is-connected .atendimento-health-dot { background: #2fb344; }
.atendimento-channel-health.is-disconnected .atendimento-health-dot { background: #d63939; }
.atendimento-error { padding: .65rem 1rem; color: #b42318; background: #fff1f0; border-bottom: 1px solid #fecdca; }
.atendimento-new-conversation {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: .6rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--at-border);
    background: color-mix(in srgb, var(--tblr-primary, #206bc4) 5%, var(--at-surface));
}
.atendimento-new-conversation[hidden] { display: none; }
.atendimento-new-conversation label { display: grid; gap: .25rem; color: var(--at-muted); font-size: .8rem; }
.atendimento-new-conversation input,
.atendimento-batch select,
.atendimento-chat-actions select {
    min-height: 34px;
    padding: .3rem .5rem;
    border: 1px solid var(--at-border);
    border-radius: .375rem;
    background: var(--at-surface);
    color: inherit;
}

.atendimento-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(420px, 1fr);
    flex: 1;
    min-height: 0;
}

.fabrion-atendimento.has-info .atendimento-workspace {
    grid-template-columns: minmax(280px, 320px) minmax(390px, 1fr) minmax(240px, 300px);
}

.atendimento-conversations,
.atendimento-contact-info { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--at-border); }
.atendimento-contact-info { padding: 1rem; border-right: 0; border-left: 1px solid var(--at-border); gap: .75rem; }
.atendimento-queue-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--at-border); }
.atendimento-queue-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: .85rem .35rem; color: var(--at-muted); font-size: .8rem; }
.atendimento-queue-tabs button.is-active { color: var(--tblr-primary, #206bc4); border-bottom-color: currentColor; }
.atendimento-queue-tabs span { display: inline-flex; min-width: 1.25rem; justify-content: center; }
.atendimento-list-toolbar { padding: .75rem; display: grid; gap: .5rem; border-bottom: 1px solid var(--at-border); }
.atendimento-search { position: relative; }
.atendimento-search i { position: absolute; left: .7rem; top: .65rem; color: var(--at-muted); }
.atendimento-search input,
.atendimento-list-toolbar select,
.atendimento-person-link input { width: 100%; min-height: 36px; border: 1px solid var(--at-border); border-radius: .375rem; background: var(--at-surface); color: inherit; }
.atendimento-search input { padding-left: 2rem; }
.atendimento-list-toolbar select,
.atendimento-person-link input { padding: .35rem .55rem; }
.atendimento-unread-filter { color: var(--at-muted); font-size: .82rem; }
.atendimento-batch { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--at-border); }
.atendimento-batch span { margin-right: auto; font-size: .8rem; color: var(--at-muted); }

.atendimento-conversation-list { flex: 1; overflow: auto; }
.atendimento-conversation-item { display: grid; grid-template-columns: 20px 42px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .75rem; cursor: pointer; border-bottom: 1px solid var(--at-border); }
.atendimento-conversation-item:hover,
.atendimento-conversation-item.is-active { background: color-mix(in srgb, var(--tblr-primary, #206bc4) 8%, transparent); }
.atendimento-list-avatar,
.atendimento-contact-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--tblr-primary, #206bc4) 16%, var(--at-surface)); color: var(--tblr-primary, #206bc4); font-weight: 700; }
.atendimento-list-avatar { width: 42px; height: 42px; }
.atendimento-contact-avatar { width: 64px; height: 64px; font-size: 1.1rem; }
.atendimento-list-copy { min-width: 0; display: grid; }
.atendimento-list-copy strong,
.atendimento-list-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atendimento-list-copy small { color: var(--at-muted); }
.atendimento-list-meta { align-self: stretch; display: grid; justify-items: end; font-size: .7rem; color: var(--at-muted); }
.atendimento-list-meta b { display: inline-flex; min-width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 1rem; background: var(--tblr-primary, #206bc4); color: #fff; }
.atendimento-list-empty,
.atendimento-chat-empty { display: grid; place-items: center; align-content: center; gap: .5rem; color: var(--at-muted); min-height: 220px; text-align: center; }
.atendimento-list-empty i,
.atendimento-chat-empty i { font-size: 2rem; }

.atendimento-chat { min-width: 0; display: flex; }
.atendimento-chat-active { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.atendimento-chat-toolbar { min-height: 62px; padding: .75rem 1rem; border-bottom: 1px solid var(--at-border); }
.atendimento-chat-toolbar > div:first-of-type { display: grid; min-width: 0; }
.atendimento-chat-toolbar span { color: var(--at-muted); font-size: .8rem; }
.atendimento-chat-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: end; }
.atendimento-chat-actions select { max-width: 160px; }
.atendimento-mobile-back { display: none; }
.atendimento-messages { flex: 1; min-height: 340px; max-height: calc(100vh - 330px); padding: 1rem; overflow: auto; background: color-mix(in srgb, var(--at-surface) 94%, #eef2f6); }
.atendimento-message { display: flex; margin: .5rem 0; }
.atendimento-message.is-saida { justify-content: flex-end; }
.atendimento-message > div { max-width: min(72%, 680px); padding: .65rem .8rem; border-radius: .75rem; background: var(--at-surface); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.atendimento-message.is-saida > div { background: color-mix(in srgb, var(--tblr-primary, #206bc4) 11%, var(--at-surface)); }
.atendimento-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.atendimento-message small { display: block; margin-top: .35rem; color: var(--at-muted); text-align: right; }
.atendimento-message-retry { margin-top: .35rem; }
.atendimento-attachment { display: block; margin-top: .45rem; padding: .45rem; border-radius: .35rem; background: rgba(0,0,0,.04); }
.atendimento-attachment.is-pending { color: var(--at-muted); }
.atendimento-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: .5rem; padding: .75rem; border-top: 1px solid var(--at-border); }
.atendimento-composer textarea { width: 100%; min-height: 40px; max-height: 140px; resize: vertical; border: 1px solid var(--at-border); border-radius: .5rem; padding: .55rem .7rem; }
.atendimento-composer.is-disabled { opacity: .62; }
.atendimento-person-link { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--at-border); }
.atendimento-person-link > div { display: flex; gap: .4rem; }

@media (max-width: 991.98px) {
    .atendimento-new-conversation { grid-template-columns: 1fr 1fr; }
    .atendimento-workspace,
    .fabrion-atendimento.has-info .atendimento-workspace { display: block; }
    .atendimento-conversations,
    .atendimento-chat,
    .atendimento-contact-info { min-height: calc(100vh - 260px); }
    .fabrion-atendimento:not(.has-conversation) .atendimento-chat { display: none; }
    .fabrion-atendimento.has-conversation .atendimento-conversations { display: none; }
    .fabrion-atendimento.has-info .atendimento-conversations,
    .fabrion-atendimento.has-info .atendimento-chat { display: none; }
    .atendimento-contact-info { border: 0; }
    .atendimento-mobile-back { display: inline-flex; }
}

@media (max-width: 575.98px) {
    .atendimento-header { align-items: flex-start; }
    .atendimento-header-actions { align-items: flex-end; flex-direction: column-reverse; }
    .atendimento-channel-health { max-width: 45%; text-align: right; }
    .atendimento-new-conversation { grid-template-columns: 1fr; }
    .atendimento-chat-toolbar { align-items: flex-start; }
    .atendimento-chat-actions .btn:not([data-at-open-info]) { padding-inline: .45rem; font-size: .72rem; }
    .atendimento-message > div { max-width: 88%; }
}