/* =========================================================
   LF CHAT - STYLE PRINCIPAL
   V0.3
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --background: #f5f7fb;

    --sidebar: #111827;
    --sidebar-hover: #1f2937;

    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;

    --text: #111827;
    --muted: #6b7280;

    --border: #e5e7eb;

    --white: #ffffff;

    --green: #16a34a;
    --green-light: #dcfce7;

    --red: #ef4444;

    --yellow: #d97706;
    --yellow-light: #fef3c7;

    --blue-light: #e0f2fe;

    --shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.03);

}


/* =========================================================
   GERAL
   ========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    overflow-x: hidden;

}


button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    cursor: pointer;
}


button:focus {
    outline: none;
}


button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline: 2px solid rgba(79, 70, 229, 0.25);

    outline-offset: 2px;

}


/* =========================================================
   APP
   ========================================================= */

.app {

    display: flex;

    width: 100%;

    min-height: 100vh;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

    width: 250px;

    height: 100vh;

    position: fixed;

    left: 0;
    top: 0;

    z-index: 50;

    display: flex;

    flex-direction: column;

    padding: 22px 16px 16px;

    background: var(--sidebar);

    color: white;

    overflow: hidden;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo-area {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    flex-shrink: 0;

}


.logo-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-size: 15px;

    font-weight: 700;

}


.logo-text strong {

    display: block;

    font-size: 18px;

}


.logo-text small {

    display: block;

    margin-top: 3px;

    color: #9ca3af;

    font-size: 11px;

}


/* =========================================================
   MENU PRINCIPAL
   ========================================================= */

.menu {

    display: flex;

    flex-direction: column;

    gap: 6px;

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 2px;

}


.menu::-webkit-scrollbar {

    width: 4px;

}


.menu::-webkit-scrollbar-track {

    background: transparent;

}


.menu::-webkit-scrollbar-thumb {

    background: #374151;

    border-radius: 20px;

}


.menu-item {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    border: 0;

    border-radius: 9px;

    padding: 11px 14px;

    background: transparent;

    color: #cbd5e1;

    font-size: 14px;

    text-align: left;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.menu-item:hover {

    background: var(--sidebar-hover);

    color: white;

}


.menu-item.active {

    background: var(--primary);

    color: white;

}


.menu-icon {

    width: 18px;

    text-align: center;

    flex-shrink: 0;

}


.menu-label {

    flex: 1;

}


.badge {

    margin-left: auto;

    min-width: 21px;

    height: 21px;

    padding: 0 6px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--red);

    color: white;

    font-size: 11px;

}


/* =========================================================
   ÁREA INFERIOR DO MENU
   ========================================================= */

.sidebar-bottom {

    margin-top: 12px;

    padding-top: 10px;

    flex-shrink: 0;

    background: var(--sidebar);

}


.sidebar-bottom > .menu-item {

    margin-bottom: 8px;

}


/* =========================================================
   EMPRESA
   ========================================================= */

.company-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 16px;

    border-top: 1px solid #374151;

    flex-shrink: 0;

}


.company-avatar,
.user-avatar {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-weight: 600;

}


.company-info {

    min-width: 0;

}


.company-info strong {

    display: block;

    max-width: 150px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 13px;

}


.company-info small {

    display: block;

    margin-top: 2px;

    color: #9ca3af;

    font-size: 11px;

}


/* =========================================================
   LOGOUT
   ========================================================= */

.logout-button {

    width: 100%;

    margin-top: 12px;

    padding: 10px 12px;

    flex-shrink: 0;

    border: 1px solid #374151;

    border-radius: 8px;

    background: transparent;

    color: #9ca3af;

    font-size: 11px;

    text-align: left;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.logout-button:hover {

    background: #1f2937;

    border-color: #4b5563;

    color: white;

}


.logout-button:disabled {

    cursor: wait;

    opacity: 0.6;

}


/* =========================================================
   MAIN
   ========================================================= */

.main {

    width: calc(100% - 250px);

    min-height: 100vh;

    margin-left: 250px;

}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {

    height: 88px;

    position: sticky;

    top: 0;

    z-index: 40;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 0 35px;

    border-bottom: 1px solid var(--border);

    background: white;

}


.topbar-title {

    min-width: 0;

}


.topbar h1 {

    font-size: 20px;

}


.topbar p {

    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;

}


.top-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-shrink: 0;

}


/* =========================================================
   NOTIFICAÇÕES
   ========================================================= */

.notification {

    position: relative;

    border: 0;

    background: transparent;

    font-size: 20px;

}


.notification span {

    width: 7px;

    height: 7px;

    position: absolute;

    right: 0;

    top: 0;

    border-radius: 50%;

    background: var(--red);

}


/* =========================================================
   USUÁRIO
   ========================================================= */

.user {

    display: flex;

    align-items: center;

    gap: 10px;

}


.user-info strong {

    display: block;

    font-size: 13px;

}


.user-info small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   PÁGINAS
   ========================================================= */

.page {

    display: none;

    padding: 30px 35px 50px;

}


.active-page {

    display: block;

}


/* =========================================================
   DASHBOARD
   ========================================================= */

.welcome {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;

}


.welcome-tag {

    display: inline-block;

    margin-bottom: 10px;

    padding: 6px 10px;

    border-radius: 20px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 11px;

    font-weight: 600;

}


.welcome h2 {

    margin-bottom: 7px;

    font-size: 26px;

}


.welcome p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   BOTÕES
   ========================================================= */

.primary-button {

    border: 0;

    border-radius: 9px;

    padding: 12px 18px;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-weight: 600;

    transition: 0.2s;

}


.primary-button:hover {

    background: var(--primary-hover);

}


.secondary-button {

    width: 100%;

    padding: 11px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: white;

    font-weight: 600;

}


.secondary-button:hover {

    background: #f9fafb;

}


.text-button {

    border: 0;

    background: transparent;

    color: var(--primary);

    font-weight: 600;

}


/* =========================================================
   CARDS
   ========================================================= */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 20px;

}


.stat-card {

    min-width: 0;

    padding: 20px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: white;

    box-shadow: var(--shadow);

}


.stat-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: var(--muted);

    font-size: 13px;

}


.stat-icon {

    width: 36px;

    height: 36px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #f3f4f6;

}


.stat-card > strong {

    display: block;

    margin: 15px 0 8px;

    font-size: 27px;

}


.stat-card small {

    color: var(--muted);

}


.stat-card .positive {

    color: var(--green);

}


/* =========================================================
   GRID DO DASHBOARD
   ========================================================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, 1fr);

    gap: 20px;

    margin-bottom: 20px;

}


/* =========================================================
   PAINEL
   ========================================================= */

.panel {

    min-width: 0;

    padding: 22px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: white;

    box-shadow: var(--shadow);

}


.panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

}


.panel-header h3 {

    font-size: 16px;

}


.panel-header p {

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   CONVERSAS DO DASHBOARD
   ========================================================= */

.conversation {

    display: flex;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);

}


.conversation:last-child {

    border-bottom: 0;

}


.contact-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

}


.conversation-content {

    min-width: 0;

    flex: 1;

}


.conversation-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.conversation-top strong {

    font-size: 13px;

}


.conversation-top small {

    flex-shrink: 0;

    color: var(--muted);

    font-size: 11px;

}


.conversation p {

    margin: 5px 0 9px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   TAGS
   ========================================================= */

.tags {

    display: flex;

    gap: 5px;

    flex-wrap: wrap;

}


.tag {

    padding: 4px 7px;

    border-radius: 10px;

    font-size: 10px;

}


.whatsapp {

    background: var(--green-light);

    color: #15803d;

}


.ai {

    background: var(--primary-light);

    color: var(--primary);

}


.human {

    background: var(--yellow-light);

    color: #92400e;

}


.site {

    background: var(--blue-light);

    color: #0369a1;

}


.waiting {

    background: #f3f4f6;

    color: #4b5563;

}


/* =========================================================
   AGENTE IA
   ========================================================= */

.status-online {

    color: var(--green);

    font-size: 12px;

    font-weight: 600;

}


.ai-card {

    padding: 15px;

    text-align: center;

}


.ai-avatar {

    width: 72px;

    height: 72px;

    margin: auto;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    font-size: 32px;

}


.ai-card h3 {

    margin-top: 15px;

}


.ai-card > p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 13px;

}


.ai-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin: 24px 0;

}


.ai-stats div {

    padding: 12px 5px;

    border-radius: 10px;

    background: #f9fafb;

}


.ai-stats strong {

    display: block;

    font-size: 18px;

}


.ai-stats span {

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   FUNIL
   ========================================================= */

.crm-panel {

    margin-top: 5px;

}


.pipeline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.pipeline-stage {

    min-width: 0;

    flex: 1;

    padding: 17px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: #f9fafb;

}


.pipeline-stage span {

    color: var(--muted);

    font-size: 12px;

}


.pipeline-stage strong {

    display: block;

    margin: 8px 0 4px;

    font-size: 24px;

}


.pipeline-stage small {

    color: var(--muted);

}


.pipeline-stage.success {

    background: #f0fdf4;

}


.pipeline-arrow {

    flex-shrink: 0;

    color: #9ca3af;

}


/* =========================================================
   PÁGINA CONVERSAS
   ========================================================= */

.conversations-page {

    height: calc(100vh - 88px);

    padding: 0;

    overflow: hidden;

}


.conversations-page.active-page {

    display: block;

}


.inbox {

    display: grid;

    grid-template-columns:
        320px
        minmax(420px, 1fr)
        310px;

    height: 100%;

    background: white;

}


/* =========================================================
   COLUNA 1 - LISTA
   ========================================================= */

.inbox-list {

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-right: 1px solid var(--border);

    background: white;

}


.inbox-list-header {

    padding: 20px 16px 14px;

    flex-shrink: 0;

    border-bottom: 1px solid var(--border);

    background: white;

}


.inbox-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 15px;

}


.inbox-title-row h2 {

    font-size: 18px;

}


.inbox-title-row span {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;

}


.new-chat-button {

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-size: 22px;

}


.new-chat-button:hover {

    background: var(--primary-hover);

}


/* =========================================================
   BUSCA
   ========================================================= */

.conversation-search {

    height: 40px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 11px;

    border: 1px solid var(--border);

    border-radius: 9px;

    background: #f9fafb;

}


.conversation-search span {

    font-size: 14px;

}


.conversation-search input {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 12px;

}


.conversation-search input::placeholder {

    color: #9ca3af;

}


/* =========================================================
   FILTROS
   ========================================================= */

.conversation-filters {

    display: flex;

    gap: 6px;

    margin-top: 12px;

    overflow-x: auto;

    scrollbar-width: none;

}


.conversation-filters::-webkit-scrollbar {

    display: none;

}


.filter-button {

    padding: 6px 10px;

    border: 1px solid var(--border);

    border-radius: 20px;

    flex-shrink: 0;

    background: white;

    color: var(--muted);

    font-size: 10px;

    white-space: nowrap;

}


.filter-button:hover {

    background: #f9fafb;

}


.filter-button.active {

    border-color: #c7d2fe;

    background: var(--primary-light);

    color: var(--primary);

    font-weight: 600;

}


/* =========================================================
   LISTA DE CHATS
   ========================================================= */

.chat-list {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

}


.chat-list-item {

    width: 100%;

    display: flex;

    gap: 10px;

    padding: 15px 14px;

    border: 0;

    border-bottom: 1px solid #f1f1f1;

    background: white;

    text-align: left;

    transition: 0.15s;

}


.chat-list-item:hover {

    background: #f9fafb;

}


.chat-list-item.active {

    background: var(--primary-light);

    box-shadow: inset 3px 0 0 var(--primary);

}


.chat-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #e0e7ff;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

}


.chat-avatar.large {

    width: 44px;

    height: 44px;

}


.chat-preview {

    min-width: 0;

    flex: 1;

}


.chat-preview-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.chat-preview-top strong {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;

}


.chat-preview-top small {

    flex-shrink: 0;

    color: var(--muted);

    font-size: 10px;

}


.chat-preview-bottom {

    display: flex;

    gap: 8px;

    margin-top: 4px;

}


.chat-preview-bottom p {

    min-width: 0;

    flex: 1;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: var(--muted);

    font-size: 11px;

}


.unread-count {

    min-width: 19px;

    height: 19px;

    padding: 0 5px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-size: 9px;

}


.chat-meta {

    display: flex;

    gap: 4px;

    flex-wrap: wrap;

    margin-top: 7px;

}


.mini-tag {

    padding: 3px 6px;

    border-radius: 8px;

    font-size: 9px;

}


/* =========================================================
   COLUNA 2 - CHAT
   ========================================================= */

.chat-area {

    min-width: 0;

    display: flex;

    flex-direction: column;

    background: #f7f8fb;

}


.chat-header {

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px 18px;

    flex-shrink: 0;

    border-bottom: 1px solid var(--border);

    background: white;

}


.chat-header-contact {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;

}


.chat-header-contact strong {

    display: block;

    font-size: 13px;

}


.contact-channel {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;

}


.online-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    flex-shrink: 0;

    background: var(--green);

}


.chat-header-actions {

    display: flex;

    gap: 5px;

    flex-shrink: 0;

}


.chat-header-actions button {

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-size: 17px;

}


.chat-header-actions button:hover {

    background: #f3f4f6;

}


/* =========================================================
   CONTROLE IA / HUMANO
   ========================================================= */

.service-control {

    min-height: 59px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 9px 18px;

    flex-shrink: 0;

    border-bottom: 1px solid var(--border);

    background: #fafaff;

}


.service-status {

    display: flex;

    align-items: center;

    gap: 10px;

}


.ai-status-icon {

    width: 34px;

    height: 34px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary-light);

}


.service-status strong {

    display: block;

    font-size: 11px;

}


.service-status small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;

}


.takeover-button {

    padding: 8px 11px;

    border: 1px solid var(--primary);

    border-radius: 8px;

    flex-shrink: 0;

    background: white;

    color: var(--primary);

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;

}


.takeover-button:hover {

    background: var(--primary-light);

}


/* =========================================================
   MENSAGENS
   ========================================================= */

.messages-area {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 20px 22px;

    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(79, 70, 229, 0.02),
            transparent 35%
        ),
        #f7f8fb;

}


.date-divider {

    width: fit-content;

    margin: 0 auto 20px;

    padding: 5px 10px;

    border-radius: 20px;

    background: #e5e7eb;

    color: var(--muted);

    font-size: 9px;

}


.message-row {

    display: flex;

    flex-direction: column;

    margin-bottom: 13px;

}


.message-row.incoming {

    align-items: flex-start;

}


.message-row.outgoing {

    align-items: flex-end;

}


.message-bubble {

    max-width: 72%;

    padding: 10px 12px;

    border-radius: 12px;

    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.03);

}


.incoming .message-bubble {

    border: 1px solid #eceef2;

    border-bottom-left-radius: 4px;

    background: white;

}


.outgoing .message-bubble {

    border-bottom-right-radius: 4px;

    background: #e4e7ff;

    color: #1f2937;

}


.message-bubble p {

    font-size: 12px;

    line-height: 1.45;

}


.message-bubble p + p {

    margin-top: 8px;

}


.message-time {

    display: block;

    margin-top: 6px;

    text-align: right;

    color: #8b8f98;

    font-size: 8px;

}


.message-agent-label {

    margin: 0 4px 4px;

    color: var(--primary);

    font-size: 9px;

    font-weight: 600;

}


/* =========================================================
   COMPOSER
   ========================================================= */

.message-composer {

    min-height: 68px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 11px 14px;

    flex-shrink: 0;

    border-top: 1px solid var(--border);

    background: white;

}


.message-composer textarea {

    min-height: 40px;

    max-height: 110px;

    flex: 1;

    resize: none;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 11px 12px;

    outline: 0;

    background: #f9fafb;

    color: var(--text);

    font-size: 12px;

}


.message-composer textarea:focus {

    border-color: #c7d2fe;

    background: white;

}


.composer-action {

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 9px;

    flex-shrink: 0;

    background: transparent;

    color: var(--muted);

    font-size: 17px;

}


.composer-action:hover {

    background: #f3f4f6;

}


.send-button {

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: var(--primary);

    color: white;

    font-size: 17px;

}


.send-button:hover {

    background: var(--primary-hover);

}


/* =========================================================
   COLUNA 3 - CONTATO
   ========================================================= */

.contact-panel {

    min-width: 0;

    overflow-y: auto;

    border-left: 1px solid var(--border);

    background: white;

}


.contact-profile {

    padding: 20px;

    border-bottom: 1px solid var(--border);

    text-align: center;

}


.contact-profile-avatar {

    width: 62px;

    height: 62px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e0e7ff;

    color: var(--primary);

    font-size: 17px;

    font-weight: 700;

}


.contact-profile h3 {

    margin-top: 10px;

    font-size: 14px;

}


.contact-profile > span {

    display: inline-block;

    margin-top: 6px;

    padding: 4px 8px;

    border-radius: 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 9px;

}


.contact-section {

    padding: 17px 18px;

    border-bottom: 1px solid var(--border);

}


.contact-section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;

}


.contact-section-title h4 {

    font-size: 12px;

}


.contact-section-title button {

    border: 0;

    background: transparent;

    color: var(--primary);

    font-size: 9px;

    font-weight: 600;

}


/* =========================================================
   DETALHES DO CONTATO
   ========================================================= */

.contact-detail {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

}


.contact-detail:last-child {

    margin-bottom: 0;

}


.contact-detail > span {

    width: 27px;

    flex-shrink: 0;

    text-align: center;

    font-size: 14px;

}


.contact-detail small {

    display: block;

    color: var(--muted);

    font-size: 9px;

}


.contact-detail strong {

    display: block;

    margin-top: 2px;

    font-size: 10px;

    font-weight: 600;

}


/* =========================================================
   RESPONSÁVEL
   ========================================================= */

.responsible-selector {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px;

    border: 1px solid var(--border);

    border-radius: 9px;

    background: #f9fafb;

    text-align: left;

}


.responsible-selector:hover {

    background: #f3f4f6;

}


.responsible-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #ede9fe;

    color: #6d28d9;

    font-size: 9px;

    font-weight: 700;

}


.responsible-selector > div:nth-child(2) {

    min-width: 0;

    flex: 1;

}


.responsible-selector strong {

    display: block;

    font-size: 10px;

}


.responsible-selector small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;

}


.selector-arrow {

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   CRM
   ========================================================= */

.field-label {

    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 9px;

}


.crm-select {

    width: 100%;

    height: 36px;

    margin-bottom: 13px;

    padding: 0 10px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: white;

    color: var(--text);

    font-size: 10px;

}


.money-input {

    height: 36px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: white;

}


.money-input span {

    padding: 0 10px;

    color: var(--muted);

    font-size: 10px;

}


.money-input input {

    width: 100%;

    height: 100%;

    flex: 1;

    border: 0;

    outline: 0;

    padding-right: 9px;

    font-size: 10px;

}


/* =========================================================
   INFORMAÇÕES COLETADAS
   ========================================================= */

.collected-info {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

}


.collected-info div {

    min-width: 0;

    padding: 9px;

    border-radius: 8px;

    background: #f9fafb;

}


.collected-info span {

    display: block;

    color: var(--muted);

    font-size: 8px;

}


.collected-info strong {

    display: block;

    margin-top: 3px;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 9px;

}


/* =========================================================
   TAGS DO CONTATO
   ========================================================= */

.contact-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.contact-tags span {

    padding: 5px 8px;

    border-radius: 12px;

    background: #f3f4f6;

    color: #4b5563;

    font-size: 9px;

}


/* =========================================================
   FINALIZAR ATENDIMENTO
   ========================================================= */

.close-conversation-button {

    width: 100%;

    padding: 10px;

    border: 1px solid #bbf7d0;

    border-radius: 8px;

    background: #f0fdf4;

    color: var(--green);

    font-size: 10px;

    font-weight: 600;

}


.close-conversation-button:hover {

    background: var(--green-light);

}


/* =========================================================
   MÓDULOS AINDA NÃO CONSTRUÍDOS
   ========================================================= */

.empty-state {

    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.empty-icon {

    margin-bottom: 20px;

    font-size: 50px;

}


.empty-state h2 {

    font-size: 22px;

}


.empty-state p {

    margin-top: 10px;

    color: var(--muted);

}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.chat-list::-webkit-scrollbar,
.messages-area::-webkit-scrollbar,
.contact-panel::-webkit-scrollbar {

    width: 6px;

}


.chat-list::-webkit-scrollbar-track,
.messages-area::-webkit-scrollbar-track,
.contact-panel::-webkit-scrollbar-track {

    background: transparent;

}


.chat-list::-webkit-scrollbar-thumb,
.messages-area::-webkit-scrollbar-thumb,
.contact-panel::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: #d1d5db;

}


/* =========================================================
   RESPONSIVO - 1250
   ========================================================= */

@media (max-width: 1250px) {

    .inbox {

        grid-template-columns:
            285px
            minmax(390px, 1fr)
            270px;

    }

}


/* =========================================================
   RESPONSIVO - 1100
   ========================================================= */

@media (max-width: 1100px) {

    .stats-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dashboard-grid {

        grid-template-columns: 1fr;

    }


    .inbox {

        grid-template-columns:
            280px
            minmax(0, 1fr);

    }


    .contact-panel {

        display: none;

    }

}


/* =========================================================
   RESPONSIVO - 850
   ========================================================= */

@media (max-width: 850px) {

    .sidebar {

        width: 72px;

        padding:
            20px
            10px
            14px;

    }


    .logo-area {

        justify-content: center;

    }


    .logo-text,
    .menu-label,
    .company-info {

        display: none;

    }


    .menu-item {

        justify-content: center;

        padding: 11px 8px;

    }


    .menu-icon {

        font-size: 17px;

    }


    .badge {

        display: none;

    }


    .company-card {

        justify-content: center;

    }


    .logout-button {

        padding: 9px 5px;

        overflow: hidden;

        white-space: nowrap;

        text-align: center;

        font-size: 0;

    }


    .logout-button::before {

        content: "↪";

        font-size: 16px;

    }


    .main {

        width: calc(100% - 72px);

        margin-left: 72px;

    }


    .topbar {

        padding: 0 18px;

    }


    .page {

        padding:
            20px
            18px
            40px;

    }


    .conversations-page {

        padding: 0;

    }


    .inbox {

        grid-template-columns:
            250px
            minmax(0, 1fr);

    }

}


/* =========================================================
   RESPONSIVO - 680
   ========================================================= */

@media (max-width: 680px) {

    .topbar {

        height: 76px;

    }


    .topbar p {

        display: none;

    }


    .user-info {

        display: none;

    }


    .conversations-page {

        height: calc(100vh - 76px);

    }


    .inbox {

        grid-template-columns: 1fr;

    }


    .inbox-list {

        display: none;

    }


    .chat-area {

        width: 100%;

    }


    .service-control {

        padding: 9px 12px;

    }


    .service-status small {

        display: none;

    }


    .messages-area {

        padding: 16px 12px;

    }


    .message-bubble {

        max-width: 88%;

    }


    .stats-grid {

        grid-template-columns: 1fr;

    }


    .welcome {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

    }


    .pipeline {

        flex-direction: column;

    }


    .pipeline-stage {

        width: 100%;

    }


    .pipeline-arrow {

        transform: rotate(90deg);

    }

}


/* =========================================================
   RESPONSIVO - 460
   ========================================================= */

@media (max-width: 460px) {

    .sidebar {

        width: 58px;

        padding-left: 7px;

        padding-right: 7px;

    }


    .logo-icon {

        width: 38px;

        height: 38px;

    }


    .main {

        width: calc(100% - 58px);

        margin-left: 58px;

    }


    .topbar {

        padding:
            0
            12px;

    }


    .top-actions {

        gap: 10px;

    }


    .page {

        padding-left: 12px;

        padding-right: 12px;

    }


    .conversations-page {

        padding: 0;

    }


    .chat-header {

        padding-left: 12px;

        padding-right: 12px;

    }


    .contact-channel {

        max-width: 180px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }


    .takeover-button {

        padding: 7px 8px;

        font-size: 9px;

    }


    .composer-action {

        display: none;

    }

}


/* =========================================================
   TELAS COM POUCA ALTURA
   Mantém empresa e logout sempre acessíveis
   ========================================================= */

@media (max-height: 720px) {

    .sidebar {

        padding-top: 14px;

        padding-bottom: 10px;

    }


    .logo-area {

        margin-bottom: 16px;

    }


    .menu {

        gap: 3px;

    }


    .menu-item {

        min-height: 36px;

        padding-top: 8px;

        padding-bottom: 8px;

    }


    .sidebar-bottom {

        margin-top: 6px;

        padding-top: 5px;

    }


    .company-card {

        padding-top: 10px;

    }


    .logout-button {

        margin-top: 7px;

        padding-top: 7px;

        padding-bottom: 7px;

    }

}
/* =========================================================
   CONTATOS
   ========================================================= */

.contacts-page {
    padding: 30px 35px 50px;
}

.contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.contacts-header h2 {
    font-size: 22px;
}

.contacts-header p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.contacts-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.contacts-stat-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: white;
    box-shadow: var(--shadow);
}

.contacts-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.contacts-stat-card strong {
    display: block;
    margin-top: 8px;
    font-size: 25px;
}

.contacts-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
}

.contacts-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.contacts-search {
    flex: 1;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f9fafb;
}

.contacts-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 12px;
}

#contacts-channel-filter {
    height: 42px;
    min-width: 165px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: white;
    color: var(--text);
    font-size: 11px;
}

.contacts-loading {
    padding: 55px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.contacts-empty {
    display: none;
    padding: 65px 20px;
    text-align: center;
}

.contacts-empty-icon {
    margin-bottom: 14px;
    font-size: 42px;
}

.contacts-empty h3 {
    font-size: 16px;
}

.contacts-empty p {
    margin: 7px 0 20px;
    color: var(--muted);
    font-size: 12px;
}

.contacts-table-wrapper {
    display: none;
    overflow-x: auto;
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
}

.contacts-table th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #f9fafb;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
}

.contacts-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 11px;
    vertical-align: middle;
}

.contacts-table tbody tr:hover {
    background: #fafafa;
}

.contacts-table tbody tr:last-child td {
    border-bottom: 0;
}

.contact-table-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-table-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
}

.contact-table-person strong {
    display: block;
    font-size: 11px;
}

.contact-table-person small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.contact-channel-tag {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 9px;
}

.contact-channel-tag.whatsapp {
    background: #dcfce7;
    color: #15803d;
}

.contact-channel-tag.site {
    background: #e0f2fe;
    color: #0369a1;
}

.contact-channel-tag.instagram {
    background: #fce7f3;
    color: #be185d;
}

.contacts-actions-column {
    width: 100px;
    text-align: right !important;
}

.contact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.contact-action-button {
    width: 31px;
    height: 31px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: white;
    font-size: 12px;
}

.contact-action-button:hover {
    background: #f3f4f6;
}

.contact-action-button.delete:hover {
    border-color: #fecaca;
    background: #fef2f2;
}


/* =========================================================
   MODAL CONTATO
   ========================================================= */

.contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-modal.open {
    display: flex;
}

.contact-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(2px);
}

.contact-modal-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    padding: 24px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.contact-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 23px;
}

.contact-modal-header h3 {
    font-size: 18px;
}

.contact-modal-header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.contact-modal-close {
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: 8px;
    background: #f3f4f6;
    color: var(--muted);
    font-size: 20px;
}

.contact-form-field {
    margin-bottom: 16px;
}

.contact-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 10px;
    font-weight: 600;
}

.contact-form-field input,
.contact-form-field select {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    background: white;
    font-size: 11px;
}

.contact-form-field input:focus,
.contact-form-field select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.07);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form-message {
    display: none;
    margin-bottom: 14px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 10px;
}

.contact-form-message.error {
    display: block;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.contact-form-message.success {
    display: block;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.contact-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 5px;
}

.contact-cancel-button {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: white;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVO CONTATOS
   ========================================================= */

@media (max-width: 1000px) {

    .contacts-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 680px) {

    .contacts-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .contacts-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #contacts-channel-filter {
        width: 100%;
    }

    .contacts-stats {
        grid-template-columns: 1fr 1fr;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

@media (max-width: 450px) {

    .contacts-stats {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   MODAL NOVA CONVERSA
   ========================================================= */

.new-conversation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.new-conversation-modal.open {
    display: flex;
}

.new-conversation-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(2px);
}

.new-conversation-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.new-conversation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.new-conversation-header h3 {
    font-size: 19px;
}

.new-conversation-header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.new-conversation-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f3f4f6;
    color: var(--muted);
    font-size: 20px;
    flex-shrink: 0;
}

.new-conversation-close:hover {
    background: #e5e7eb;
}

.new-conversation-search {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f9fafb;
    margin-bottom: 14px;
}

.new-conversation-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 12px;
}

.new-conversation-loading {
    padding: 28px 10px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

.new-conversation-empty {
    display: none;
    padding: 30px 10px;
    text-align: center;
}

.new-conversation-empty > div {
    font-size: 34px;
    margin-bottom: 10px;
}

.new-conversation-empty strong {
    display: block;
    font-size: 13px;
}

.new-conversation-empty p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.new-conversation-contact-list {
    display: none;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.new-conversation-contact-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    background: white;
    text-align: left;
}

.new-conversation-contact-item:last-child {
    border-bottom: 0;
}

.new-conversation-contact-item:hover {
    background: #f9fafb;
}

.new-conversation-contact-item.active {
    background: var(--primary-light);
    box-shadow: inset 3px 0 0 var(--primary);
}

.new-conversation-contact-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e0e7ff;
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
}

.new-conversation-contact-info {
    min-width: 0;
    flex: 1;
}

.new-conversation-contact-info strong {
    display: block;
    font-size: 11px;
}

.new-conversation-contact-info span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.new-conversation-contact-channel {
    padding: 4px 7px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 8px;
    flex-shrink: 0;
}

.new-conversation-contact-channel.whatsapp {
    background: #dcfce7;
    color: #15803d;
}

.new-conversation-contact-channel.site {
    background: #e0f2fe;
    color: #0369a1;
}

.new-conversation-contact-channel.instagram {
    background: #fce7f3;
    color: #be185d;
}

.new-conversation-options {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f9fafb;
    margin-bottom: 14px;
}

.new-conversation-field {
    margin-bottom: 13px;
}

.new-conversation-field label {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 10px;
    font-weight: 600;
}

.new-conversation-field select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
    color: var(--text);
    font-size: 11px;
}

.new-conversation-ai {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.new-conversation-ai input {
    margin-top: 2px;
}

.new-conversation-ai strong {
    display: block;
    font-size: 10px;
}

.new-conversation-ai small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.new-conversation-message {
    display: none;
    margin-bottom: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 10px;
}

.new-conversation-message.error {
    display: block;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.new-conversation-message.success {
    display: block;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.new-conversation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 2px;
}

.new-conversation-contact-list::-webkit-scrollbar {
    width: 6px;
}

.new-conversation-contact-list::-webkit-scrollbar-track {
    background: transparent;
}

.new-conversation-contact-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

@media (max-width: 620px) {

    .new-conversation-card {
        max-height: 92vh;
        padding: 20px 16px;
    }

    .new-conversation-contact-list {
        max-height: 220px;
    }

    .new-conversation-actions {
        flex-direction: column-reverse;
    }

    .new-conversation-actions button {
        width: 100%;
    }
}
/* =========================================================
   CORREÇÃO DE ALTURA - TELA DE CONVERSAS
   Mantém o campo de mensagem sempre visível
   ========================================================= */

.conversations-page {
    height: calc(100vh - 88px);
    min-height: 0;
    overflow: hidden;
}

.inbox {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inbox-list {
    min-height: 0;
    overflow: hidden;
}

.chat-area {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.messages-area {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.message-composer {
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    z-index: 5;
}

.contact-panel {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}


/* Navegadores modernos */

@supports (height: 100dvh) {

    .conversations-page {
        height: calc(100dvh - 88px);
    }

}


/* TOPBAR MENOR EM TELAS MENORES */

@media (max-width: 680px) {

    .conversations-page {
        height: calc(100vh - 76px);
    }

    @supports (height: 100dvh) {

        .conversations-page {
            height: calc(100dvh - 76px);
        }

    }

}
/* =========================================================
   ABAS DE STATUS DAS CONVERSAS
   ========================================================= */

.conversation-status-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 12px;
}

.conversation-status-tab {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: #ffffff;
    color: #6b7280;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.2s ease;
}

.conversation-status-tab:hover {
    background: #f9fafb;
    color: var(--text);
}

.conversation-status-tab.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.conversation-status-count {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 999px;

    background: #f3f4f6;
    color: #6b7280;

    font-size: 9px;
    font-weight: 700;
}

.conversation-status-tab.active
.conversation-status-count {
    background: var(--primary);
    color: #ffffff;
}
/*
============================================================
LF CHAT — PACOTE 1 MOBILE / RESPONSIVIDADE
VERSÃO 25.1

COLE TODO ESTE BLOCO NO FINAL DO style.css ATUAL.
NÃO APAGUE O CSS QUE JÁ EXISTE.
============================================================
*/

:root {
                --lf-mobile-visual-height: 100dvh;
                --lf-mobile-conversations-top: 0px;
                --lf-mobile-rail-width: 64px;
                --lf-mobile-purple: #4f46e5;
                --lf-mobile-dark: #111827;
                --lf-mobile-border: #e5e7eb;
                --lf-safe-top: env(safe-area-inset-top, 0px);
                --lf-safe-bottom: env(safe-area-inset-bottom, 0px);
                --lf-safe-left: env(safe-area-inset-left, 0px);
                --lf-safe-right: env(safe-area-inset-right, 0px);
            }

            .lf-mobile-only {
                display: none !important;
            }

            @media (max-width: 767px) {
                html {
                    width: 100%;
                    max-width: 100%;
                    overflow-x: hidden;
                    -webkit-text-size-adjust: 100%;
                    text-size-adjust: 100%;
                }

                body {
                    width: 100%;
                    max-width: 100%;
                    min-height: 100dvh;
                    overflow-x: hidden !important;
                    overscroll-behavior-x: none;
                }

                body.lf-mobile-drawer-open {
                    overflow: hidden !important;
                }

                /* Elementos mobile: cada tipo recebe seu display correto. */
                .lf-mobile-menu-toggle,
                .lf-mobile-back,
                .lf-mobile-info,
                .lf-mobile-details-back {
                    display: inline-flex !important;
                }

                .lf-mobile-drawer {
                    display: block !important;
                }

                .lf-mobile-drawer-overlay {
                    display: none !important;
                }

                body.lf-mobile-drawer-open
                    .lf-mobile-drawer-overlay {
                    display: block !important;
                }

                /* Evita zoom automático do Safari ao focar campos. */
                input,
                textarea,
                select {
                    font-size: max(16px, 1em);
                }

                button,
                [role="button"],
                .menu-item,
                .chat-list-item {
                    touch-action: manipulation;
                    -webkit-tap-highlight-color: transparent;
                }

                #conversas-page {
                    max-width: 100% !important;
                    overflow: hidden !important;
                }

                #conversas-page.active-page {
                    width: 100% !important;
                }

                .lf-mobile-conversation-layout {
                    display: block !important;
                    position: relative !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    min-width: 0 !important;
                    height: max(
                        420px,
                        calc(
                            var(--lf-mobile-visual-height) -
                            var(--lf-mobile-conversations-top)
                        )
                    ) !important;
                    min-height: 0 !important;
                    overflow: hidden !important;
                    grid-template-columns: 1fr !important;
                }

                .lf-mobile-list-pane,
                .lf-mobile-chat-pane,
                .lf-mobile-details-pane {
                    position: absolute !important;
                    inset: 0 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    min-width: 0 !important;
                    height: 100% !important;
                    min-height: 0 !important;
                    margin: 0 !important;
                    border-left: 0 !important;
                    border-right: 0 !important;
                    box-sizing: border-box !important;
                    background: #fff;
                }

                .lf-mobile-list-pane {
                    overflow-y: auto !important;
                    overflow-x: hidden !important;
                    -webkit-overflow-scrolling: touch;
                }

                .lf-mobile-chat-pane {
                    display: flex !important;
                    flex-direction: column !important;
                    overflow: hidden !important;
                }

                .lf-mobile-details-pane {
                    overflow-y: auto !important;
                    overflow-x: hidden !important;
                    -webkit-overflow-scrolling: touch;
                    padding-bottom: calc(
                        24px + var(--lf-safe-bottom)
                    ) !important;
                }

                body[data-lf-mobile-conversation-view="list"]
                    .lf-mobile-chat-pane,
                body[data-lf-mobile-conversation-view="list"]
                    .lf-mobile-details-pane {
                    display: none !important;
                    pointer-events: none !important;
                }

                body[data-lf-mobile-conversation-view="chat"]
                    .lf-mobile-list-pane,
                body[data-lf-mobile-conversation-view="chat"]
                    .lf-mobile-details-pane {
                    display: none !important;
                    pointer-events: none !important;
                }

                body[data-lf-mobile-conversation-view="details"]
                    .lf-mobile-list-pane,
                body[data-lf-mobile-conversation-view="details"]
                    .lf-mobile-chat-pane {
                    display: none !important;
                    pointer-events: none !important;
                }

                body[data-lf-mobile-conversation-view="list"]
                    .lf-mobile-list-pane {
                    display: block !important;
                    pointer-events: auto !important;
                }

                body[data-lf-mobile-conversation-view="chat"]
                    .lf-mobile-chat-pane {
                    display: flex !important;
                    pointer-events: auto !important;
                }

                body[data-lf-mobile-conversation-view="details"]
                    .lf-mobile-details-pane {
                    display: block !important;
                    pointer-events: auto !important;
                }

                .lf-mobile-chat-pane .chat-header {
                    position: relative !important;
                    flex: 0 0 auto !important;
                    min-height: 62px !important;
                    padding-left: 54px !important;
                    padding-right: 52px !important;
                    box-sizing: border-box !important;
                    z-index: 5;
                    background: #fff;
                }

                .lf-mobile-back,
                .lf-mobile-info,
                .lf-mobile-details-back {
                    width: 44px !important;
                    min-width: 44px !important;
                    height: 44px !important;
                    min-height: 44px !important;
                    border: 0 !important;
                    border-radius: 12px !important;
                    background: #f3f4f6 !important;
                    color: #111827 !important;
                    align-items: center !important;
                    justify-content: center !important;
                    font-size: 22px !important;
                    line-height: 1 !important;
                    cursor: pointer !important;
                    z-index: 10 !important;
                }

                .lf-mobile-back {
                    position: absolute !important;
                    left: 6px !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                }

                .lf-mobile-info {
                    position: absolute !important;
                    right: 6px !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    font-size: 19px !important;
                }

                .lf-mobile-details-back {
                    position: sticky !important;
                    top: 8px !important;
                    margin: 8px 8px 8px 10px !important;
                    background: #eef2ff !important;
                    color: #4338ca !important;
                }

                #messages-area {
                    flex: 1 1 auto !important;
                    min-height: 0 !important;
                    overflow-y: auto !important;
                    overflow-x: hidden !important;
                    -webkit-overflow-scrolling: touch !important;
                    overscroll-behavior-y: contain;
                    padding-left: 12px !important;
                    padding-right: 12px !important;
                }

                #messages-area img,
                #messages-area video {
                    max-width: 100% !important;
                    height: auto !important;
                }

                #messages-area [class*="message"],
                #messages-area [class*="bubble"] {
                    max-width: min(86%, 520px) !important;
                    overflow-wrap: anywhere;
                    word-break: break-word;
                }

                .lf-mobile-composer {
                    position: sticky !important;
                    bottom: 0 !important;
                    flex: 0 0 auto !important;
                    z-index: 8 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                    padding-bottom: max(
                        8px,
                        var(--lf-safe-bottom)
                    ) !important;
                    background: #fff !important;
                }

                #message-input {
                    min-width: 0 !important;
                    max-width: 100% !important;
                    font-size: 16px !important;
                    line-height: 1.35 !important;
                }

                #send-message {
                    width: 46px !important;
                    min-width: 46px !important;
                    height: 46px !important;
                    min-height: 46px !important;
                }

                .lf-mobile-composer button,
                .lf-mobile-composer [role="button"] {
                    min-width: 44px;
                    min-height: 44px;
                }

                .chat-list-item {
                    min-height: 72px !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                }

                .chat-preview {
                    min-width: 0 !important;
                }

                .chat-preview p,
                .chat-preview strong {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                /*
                 * DRAWER DE NAVEGAÇÃO.
                 * O menu estreito atual continua existindo; o drawer
                 * só abre por cima quando o usuário pede.
                 */
                .lf-mobile-menu-toggle {
                    position: fixed !important;
                    left: max(
                        2px,
                        calc(var(--lf-mobile-rail-width) - 14px)
                    ) !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    width: 30px !important;
                    min-width: 30px !important;
                    height: 54px !important;
                    min-height: 54px !important;
                    border: 1px solid #dbe1ea !important;
                    border-left: 0 !important;
                    border-radius: 0 13px 13px 0 !important;
                    background: #ffffff !important;
                    color: #4f46e5 !important;
                    box-shadow: 4px 0 14px rgba(15, 23, 42, .12);
                    align-items: center !important;
                    justify-content: center !important;
                    font-size: 24px !important;
                    font-weight: 700 !important;
                    z-index: 10020 !important;
                    cursor: pointer !important;
                }

                .lf-mobile-drawer-overlay {
                    position: fixed !important;
                    inset: 0 !important;
                    display: none !important;
                    background: rgba(15, 23, 42, .46) !important;
                    z-index: 10030 !important;
                    -webkit-backdrop-filter: blur(2px);
                    backdrop-filter: blur(2px);
                }

                body.lf-mobile-drawer-open
                    .lf-mobile-drawer-overlay {
                    display: block !important;
                }

                .lf-mobile-drawer {
                    position: fixed !important;
                    left: 0 !important;
                    top: 0 !important;
                    bottom: 0 !important;
                    width: min(82vw, 310px) !important;
                    max-width: 310px !important;
                    transform: translateX(-104%);
                    transition: transform .22s ease;
                    z-index: 10040 !important;
                    background: #111827 !important;
                    color: #fff !important;
                    box-shadow: 12px 0 36px rgba(0, 0, 0, .22);
                    padding:
                        max(18px, calc(12px + var(--lf-safe-top)))
                        14px
                        max(18px, calc(12px + var(--lf-safe-bottom)));
                    box-sizing: border-box !important;
                    overflow-y: auto !important;
                    -webkit-overflow-scrolling: touch;
                }

                body.lf-mobile-drawer-open
                    .lf-mobile-drawer {
                    transform: translateX(0);
                }

                .lf-mobile-drawer-header {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 4px 4px 18px;
                    border-bottom: 1px solid rgba(255,255,255,.12);
                    margin-bottom: 12px;
                }

                .lf-mobile-drawer-logo {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 44px;
                    height: 44px;
                    border-radius: 13px;
                    background: #4f46e5;
                    color: #fff;
                    font-size: 17px;
                    font-weight: 800;
                    flex: 0 0 auto;
                }

                .lf-mobile-drawer-brand {
                    min-width: 0;
                    flex: 1;
                }

                .lf-mobile-drawer-brand strong {
                    display: block;
                    font-size: 17px;
                }

                .lf-mobile-drawer-brand small {
                    display: block;
                    margin-top: 2px;
                    color: #94a3b8;
                    font-size: 11px;
                }

                .lf-mobile-drawer-close {
                    width: 44px;
                    height: 44px;
                    min-width: 44px;
                    min-height: 44px;
                    border: 0;
                    border-radius: 12px;
                    background: rgba(255,255,255,.08);
                    color: #fff;
                    font-size: 22px;
                    cursor: pointer;
                }

                .lf-mobile-drawer-nav {
                    display: grid;
                    gap: 5px;
                }

                .lf-mobile-drawer-item {
                    width: 100%;
                    min-height: 50px;
                    display: flex;
                    align-items: center;
                    gap: 13px;
                    padding: 10px 12px;
                    border: 0;
                    border-radius: 12px;
                    background: transparent;
                    color: #e5e7eb;
                    text-align: left;
                    font: inherit;
                    cursor: pointer;
                }

                .lf-mobile-drawer-item:active {
                    transform: scale(.985);
                }

                .lf-mobile-drawer-item.active {
                    background: #4f46e5;
                    color: #fff;
                }

                .lf-mobile-drawer-item-icon {
                    width: 26px;
                    display: inline-flex;
                    justify-content: center;
                    font-size: 19px;
                    flex: 0 0 auto;
                }

                .lf-mobile-drawer-item-label {
                    font-size: 14px;
                    font-weight: 650;
                    flex: 1;
                }

                .lf-mobile-drawer-item-badge {
                    min-width: 24px;
                    height: 24px;
                    padding: 0 6px;
                    border-radius: 999px;
                    background: #ef4444;
                    color: #fff;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    font-weight: 800;
                }

                /* Modais não podem estourar a largura do iPhone/Android. */
                [role="dialog"],
                .modal,
                [class*="modal"] {
                    max-width: calc(
                        100vw -
                        24px -
                        var(--lf-safe-left) -
                        var(--lf-safe-right)
                    ) !important;
                }

                /*
                 * Cabeçalhos e textos longos:
                 * evita que número do WhatsApp / labels empurrem a tela.
                 */
                .contact-channel,
                .chat-header,
                .chat-header * {
                    min-width: 0;
                }

                .contact-channel {
                    overflow-wrap: anywhere;
                }
            }


/* =========================================================
   LF CHAT — HOTFIX PACOTE 1 v25.2
   Corrige drawer/mobile no Safari iOS e Chrome Android
   ========================================================= */

@media (max-width: 767px) {

    /* O drawer nunca pode participar do fluxo normal da página. */
    .lf-mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(82vw, 310px) !important;
        max-width: 310px !important;
        margin: 0 !important;
        z-index: 10040 !important;
        display: block !important;
        transform: translate3d(-104%, 0, 0) !important;
    }

    body.lf-mobile-drawer-open .lf-mobile-drawer {
        transform: translate3d(0, 0, 0) !important;
    }

    .lf-mobile-drawer-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        z-index: 10030 !important;
        display: none !important;
    }

    body.lf-mobile-drawer-open .lf-mobile-drawer-overlay {
        display: block !important;
    }

    .lf-mobile-menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
    }

    .lf-mobile-back,
    .lf-mobile-info,
    .lf-mobile-details-back {
        display: inline-flex !important;
    }

    /*
     * Nenhuma peça auxiliar do Pacote 1 pode aparecer
     * como texto solto no final da página.
     */
    .lf-mobile-drawer,
    .lf-mobile-drawer *,
    .lf-mobile-drawer-overlay,
    .lf-mobile-menu-toggle {
        box-sizing: border-box !important;
    }

    /* Chat deve usar toda a largura disponível no mobile. */
    .lf-mobile-conversation-layout,
    .lf-mobile-list-pane,
    .lf-mobile-chat-pane,
    .lf-mobile-details-pane {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #conversas-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/*
============================================================
LF CHAT — AJUSTE VISUAL DA SETA DO MENU MOBILE
Pacote 1 — Hotfix v25.3

COLE TODO ESTE BLOCO NO FINAL DO style.css
============================================================
*/

@media (max-width: 767px) {

    .lf-mobile-menu-toggle {
        left: calc(var(--lf-mobile-rail-width) - 7px) !important;

        width: 22px !important;
        min-width: 22px !important;

        height: 42px !important;
        min-height: 42px !important;

        border: 0 !important;
        border-radius: 0 10px 10px 0 !important;

        background: rgba(17, 24, 39, 0.72) !important;
        color: rgba(255, 255, 255, 0.92) !important;

        box-shadow:
            2px 0 8px rgba(15, 23, 42, 0.10) !important;

        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);

        font-size: 20px !important;
        font-weight: 500 !important;

        opacity: 0.78 !important;

        transition:
            opacity .18s ease,
            background .18s ease,
            transform .18s ease !important;
    }

    .lf-mobile-menu-toggle:active {
        opacity: 1 !important;
        background: rgba(79, 70, 229, 0.92) !important;
        transform:
            translateY(-50%)
            scale(0.96) !important;
    }

    body.lf-mobile-drawer-open .lf-mobile-menu-toggle {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
/*
============================================================
LF CHAT — AJUSTE DA ABA/SETA DO MENU MOBILE
Pacote 1 — Hotfix v25.4

COLE TODO ESTE BLOCO NO FINAL DO style.css
Não apague os ajustes anteriores.
============================================================
*/

@media (max-width: 767px) {

    /*
     * Deixa a aba visivelmente "presa" na lateral,
     * mas um pouco para fora da barra escura.
     */
    .lf-mobile-menu-toggle {
        left: calc(var(--lf-mobile-rail-width) - 4px) !important;

        width: 28px !important;
        min-width: 28px !important;

        height: 40px !important;
        min-height: 40px !important;

        border-radius: 0 12px 12px 0 !important;

        background: rgba(17, 24, 39, 0.78) !important;
        color: rgba(255, 255, 255, 0.96) !important;

        border-top: 1px solid rgba(255,255,255,.10) !important;
        border-right: 1px solid rgba(255,255,255,.16) !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            4px 0 10px rgba(15, 23, 42, 0.12) !important;

        opacity: 0.90 !important;

        font-size: 20px !important;
    }

    /*
     * Pequeno ponto de referência visual:
     * reforça que isso é uma "alça/botão" separado dos ícones.
     */
    .lf-mobile-menu-toggle::before {
        content: "" !important;

        position: absolute !important;
        left: 3px !important;
        top: 50% !important;

        width: 4px !important;
        height: 4px !important;

        border-radius: 50% !important;

        background: rgba(255,255,255,.72) !important;

        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    .lf-mobile-menu-toggle:active {
        background: rgba(79, 70, 229, 0.94) !important;
        opacity: 1 !important;
    }
}
/*
============================================================
LF CHAT — PACOTE 1 MOBILE
ETAPA LISTA -> CHAT -> DETALHES
Hotfix v25.5

COLE TODO ESTE BLOCO NO FINAL DO style.css.
NÃO APAGUE os ajustes anteriores do Pacote 1.
============================================================
*/

@media (max-width: 767px) {

    /*
     * Quando entra no chat ou nos detalhes, o mobile passa
     * para um modo realmente focado na conversa:
     * some a barra lateral fixa e o conteúdo usa a tela toda.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-source-sidebar,
    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-source-sidebar {
        display: none !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-main-shell,
    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-main-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        padding-left: 0 !important;

        left: 0 !important;
    }


    /*
     * O cabeçalho geral "Conversas + sino + avatar" é útil
     * na lista. Dentro do chat, o cabeçalho passa a ser o
     * próprio contato, com voltar e informações.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-global-header,
    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-global-header {
        display: none !important;
    }


    /*
     * A pequena alça do menu lateral não aparece dentro
     * da conversa. Para sair, usa-se a seta Voltar.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-menu-toggle,
    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-menu-toggle {
        display: none !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        #conversas-page,
    body[data-lf-mobile-conversation-view="details"]
        #conversas-page {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-conversation-layout,
    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-conversation-layout {
        width: 100vw !important;
        max-width: 100vw !important;

        height: var(--lf-mobile-visual-height) !important;
        min-height: var(--lf-mobile-visual-height) !important;

        margin: 0 !important;
        inset: auto !important;
    }


    /* =====================================================
       CABEÇALHO DO CHAT
       ===================================================== */

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-chat-pane {
        inset: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: var(--lf-mobile-visual-height) !important;

        border: 0 !important;
        background: #f8f9fe !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-chat-pane
        .chat-header {
        min-height: calc(
            66px + env(safe-area-inset-top, 0px)
        ) !important;

        padding-top: env(
            safe-area-inset-top,
            0px
        ) !important;

        padding-left: 62px !important;
        padding-right: 58px !important;

        border-bottom: 1px solid #e5e7eb !important;

        background: rgba(
            255,
            255,
            255,
            0.98
        ) !important;

        box-shadow:
            0 1px 4px
            rgba(15, 23, 42, .05) !important;

        box-sizing: border-box !important;
    }


    /*
     * Voltar: visual discreto, mas com área de toque segura.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-back {
        left: 8px !important;

        width: 44px !important;
        min-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;

        border-radius: 50% !important;

        background: #f1f3f7 !important;
        color: #3730a3 !important;

        font-size: 29px !important;
        font-weight: 400 !important;

        box-shadow: none !important;
    }


    /*
     * Informações do contato.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-info {
        right: 8px !important;

        width: 44px !important;
        min-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;

        border-radius: 50% !important;

        background: #f1f3f7 !important;
        color: #4f46e5 !important;

        font-size: 21px !important;

        box-shadow: none !important;
    }


    /*
     * Nome/canal nunca podem empurrar os botões para fora.
     */
    body[data-lf-mobile-conversation-view="chat"]
        .chat-header,
    body[data-lf-mobile-conversation-view="chat"]
        .chat-header * {
        min-width: 0 !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        #active-contact-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }


    /* =====================================================
       MENSAGENS + COMPOSER
       ===================================================== */

    body[data-lf-mobile-conversation-view="chat"]
        #messages-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        padding:
            12px
            12px
            14px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        background: #f8f9fe !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-composer {
        position: sticky !important;
        bottom: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        padding:
            9px
            10px
            max(
                9px,
                env(safe-area-inset-bottom, 0px)
            ) !important;

        border-top: 1px solid #e5e7eb !important;

        background: rgba(
            255,
            255,
            255,
            0.98
        ) !important;

        box-sizing: border-box !important;

        z-index: 30 !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        #message-input {
        min-height: 46px !important;

        font-size: 16px !important;

        border-radius: 14px !important;
    }


    body[data-lf-mobile-conversation-view="chat"]
        #send-message {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        border-radius: 14px !important;
    }


    /* =====================================================
       TELA DE INFORMAÇÕES
       ===================================================== */

    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-details-pane {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: var(--lf-mobile-visual-height) !important;

        padding:
            max(
                8px,
                env(safe-area-inset-top, 0px)
            )
            14px
            max(
                24px,
                env(safe-area-inset-bottom, 0px)
            ) !important;

        background: #ffffff !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        box-sizing: border-box !important;

        z-index: 40 !important;
    }


    body[data-lf-mobile-conversation-view="details"]
        .lf-mobile-details-back {
        position: sticky !important;
        top: 0 !important;

        width: 44px !important;
        min-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin:
            0
            0
            10px
            0 !important;

        border-radius: 50% !important;

        background: #f1f3f7 !important;
        color: #3730a3 !important;

        font-size: 29px !important;

        z-index: 50 !important;
    }


    /*
     * O layout normal da lista permanece exatamente como está.
     */
    body[data-lf-mobile-conversation-view="list"]
        .lf-mobile-source-sidebar {
        display: flex;
    }
}
/*
============================================================
LF CHAT — PACOTE 1 MOBILE
COMPOSER + ANEXOS VISÍVEIS NO MOBILE
Hotfix v25.6

COLE TODO ESTE BLOCO NO FINAL DO style.css.
NÃO APAGUE os ajustes anteriores do Pacote 1.
============================================================
*/

@media (max-width: 767px) {

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-conversation-layout {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--lf-mobile-visual-height, 100dvh) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 100 !important;
        overflow: hidden !important;
        background: #f8f9fe !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-chat-pane {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        #messages-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-composer-v256 {
        display: flex !important;
        align-items: flex-end !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 62px !important;
        margin: 0 !important;
        padding: 8px 9px max(8px, env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #e5e7eb !important;
        background: rgba(255,255,255,.98) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        visibility: visible !important;
        z-index: 150 !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-composer-v256
        #message-input {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        max-height: 110px !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        .lf-mobile-composer-v256
        #send-message {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        visibility: visible !important;
    }

    body[data-lf-mobile-conversation-view="chat"]
        [data-lf-attachment-button="1"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        visibility: visible !important;
        font-size: 19px !important;
        box-sizing: border-box !important;
    }

    .lf-mobile-attachment-menu-v256 {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(var(--lf-mobile-composer-height, 70px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
        width: auto !important;
        max-width: 360px !important;
        max-height: min(360px, 58dvh) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 100000 !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lf-mobile-attachment-menu-v256 button {
        min-height: 44px !important;
        font-size: 14px !important;
        touch-action: manipulation;
    }

    body[data-lf-mobile-keyboard-open="1"]
        .lf-mobile-composer-v256 {
        padding-bottom: 8px !important;
    }
}
/*
============================================================
LF CHAT — PACOTE 1 MOBILE
CORREÇÃO LOCAL DOS BOTÕES DE ANEXO
Hotfix v25.8

COLE TODO ESTE BLOCO NO FINAL DO style.css.
NÃO RECOLOQUE o v25.7.
============================================================
*/

@media (max-width: 767px) {
    .lf-mobile-attachment-menu-v256,
    .lf-mobile-attachment-menu-v256 * {
        pointer-events: auto !important;
    }

    .lf-mobile-attachment-menu-v256 button[data-lf-attach] {
        position: relative !important;
        z-index: 1 !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: manipulation !important;
    }

    .lf-mobile-attachment-menu-v256 button[data-lf-attach]:active {
        background: #eef2ff !important;
        transform: scale(.99);
    }
}
/*
============================================================
LF CHAT — PACOTE 1 MOBILE
PONTE DE TOQUE PARA MENUS/MODAIS DINÂMICOS
Hotfix v25.9

COLE TODO ESTE BLOCO NO FINAL DO style.css.
MANTENHA o CSS v25.8.
NÃO RECOLOQUE o JS v25.8 nem o v25.7.
============================================================
*/

@media (max-width: 767px) {

    /*
     * Garante que o modal de localização e todos os controles
     * realmente recebam eventos de toque no iOS/Android.
     */
    [data-lf-location-overlay="1"],
    [data-lf-location-overlay="1"] * {
        pointer-events: auto !important;
    }

    [data-lf-location-close="1"],
    [data-lf-location-cancel="1"],
    [data-lf-use-current-location="1"],
    [data-lf-location-send="1"],
    .lf-mobile-attachment-menu-v256 button[data-lf-attach] {
        -webkit-tap-highlight-color: rgba(79, 70, 229, .10);
        cursor: pointer !important;
    }

    /*
     * Não aplicamos touch-action no mapa, pois o Leaflet
     * precisa receber gesto de arrastar e zoom.
     */
    [data-lf-location-close="1"],
    [data-lf-location-cancel="1"],
    [data-lf-use-current-location="1"],
    [data-lf-location-send="1"],
    .lf-mobile-attachment-menu-v256 button[data-lf-attach] {
        touch-action: manipulation !important;
    }

    #lf-location-map,
    #lf-location-map * {
        pointer-events: auto !important;
    }

    [data-lf-location-name="1"],
    [data-lf-location-address="1"] {
        pointer-events: auto !important;
        touch-action: auto !important;
        -webkit-user-select: text !important;
        user-select: text !important;
    }
}

/* LF Chat v27 — gravador de voz */
.message-composer { position: relative; }
#lf-voice-button { display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-width:44px; border:1px solid #e0e7ff; border-radius:12px; background:#f5f3ff; color:#4f46e5; cursor:pointer; touch-action:manipulation; }
#lf-voice-button.lf-voice-recording { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
#lf-voice-button:focus-visible, #lf-voice-panel button:focus-visible { outline:3px solid #a5b4fc; outline-offset:2px; }
#lf-voice-panel { position:absolute; left:8px; right:8px; bottom:calc(100% + 8px); z-index:20; padding:16px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 8px 28px #0f172a24; color:#1e293b; box-sizing:border-box; }
#lf-voice-panel[hidden], #lf-voice-panel [hidden] { display:none !important; }
#lf-voice-panel .lf-voice-top { display:flex; align-items:center; gap:12px; justify-content:space-between; font-size:14px; }
#lf-voice-panel .lf-voice-time { font-variant-numeric:tabular-nums; flex-shrink:0; }
#lf-voice-panel audio { display:block; width:100%; max-width:100%; height:42px; margin-top:12px; }
#lf-voice-panel .lf-voice-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
#lf-voice-panel button { display:inline-flex !important; align-items:center; justify-content:center; padding:10px 14px; min-height:44px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#334155; cursor:pointer; font:inherit; font-size:14px; touch-action:manipulation; }
#lf-voice-panel button[data-voice="send"] { color:#fff; background:#4f46e5; border-color:#4f46e5; }
#lf-voice-panel button:disabled { opacity:.5; cursor:wait; }
@media(max-width:767px) {
    .message-composer { gap:6px !important; overflow:visible !important; }
    #lf-voice-button { flex:0 0 44px !important; min-height:44px !important; }
    #message-input { flex:1 1 0 !important; min-width:0 !important; }
    #lf-voice-panel { padding:12px; }
}

/* v27.1 — microfone permanente e player com largura definida. */
#lf-voice-button { display:inline-flex !important; visibility:visible !important; opacity:1 !important; touch-action:none !important; user-select:none !important; -webkit-user-select:none !important; -webkit-touch-callout:none !important; }
.message-bubble.lf-audio-bubble { width: min(340px, calc(100vw - 52px)); box-sizing:border-box; }
.message-bubble.lf-audio-bubble audio { display:block; width:100% !important; min-width:0; max-width:100%; height:44px; }
@media(max-width:767px) {
 body[data-lf-mobile-conversation-view="chat"] .lf-mobile-composer-v256 #lf-voice-button { display:inline-flex !important; visibility:visible !important; flex:0 0 44px !important; width:44px !important; min-width:44px !important; height:44px !important; margin:0 !important; padding:0 !important; }
 body[data-lf-mobile-conversation-view="chat"] .lf-mobile-composer-v256 #message-input { flex:1 1 0 !important; width:0 !important; min-width:0 !important; }
}

/* v27.2 — reserva o rodapé, sem esconder Configurações e Sair. */
@media (max-width:767px) {
    .sidebar.lf-mobile-source-sidebar, .sidebar {
        height:var(--lf27-height, 100dvh) !important;
        max-height:var(--lf27-height, 100dvh) !important;
        box-sizing:border-box !important;
        padding-top:12px !important;
        padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .sidebar .logo-area { margin-bottom:12px !important; }
    .sidebar .menu { flex:1 1 0 !important; min-height:0 !important; overflow-y:auto !important; }
    .sidebar .menu .menu-item { flex-shrink:0; min-height:42px; }
    .sidebar .sidebar-bottom { flex:0 0 auto !important; margin-top:8px !important; padding-top:4px !important; }
    .sidebar .sidebar-bottom .company-card { display:none !important; }
    .sidebar .sidebar-bottom > .menu-item { min-height:44px !important; padding:8px 2px !important; }
    .sidebar #logout-button { display:flex !important; align-items:center; justify-content:center; flex-direction:column; gap:2px; width:100%; height:44px; min-height:44px; margin-top:4px !important; padding:4px 0 !important; font-size:0; }
    .sidebar #logout-button::after { content:"Sair"; font-size:10px; }
    .lf-mobile-drawer { height:var(--lf27-height, 100dvh) !important; max-height:var(--lf27-height, 100dvh) !important; overflow-y:auto !important; padding-bottom:24px !important; }
    .chat-header-contact { flex:1 1 auto; min-width:0; overflow:hidden; }
    .chat-header-contact .contact-channel { display:flex !important; flex-wrap:wrap !important; gap:3px 5px !important; align-items:center; position:static !important; height:auto !important; line-height:1.35 !important; }
    .chat-header-contact .contact-channel > * { position:static !important; transform:none !important; white-space:normal !important; }
    .chat-header-contact .contact-channel label { max-width:100%; }
    html.lf-ios-chat-lock { overflow:hidden !important; overscroll-behavior:none; height:100%; }
    body.lf-ios-chat-lock { position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; overscroll-behavior:none; }
    body.lf-ios-chat-lock[data-lf-mobile-conversation-view="chat"] .lf-mobile-conversation-layout,
    body.lf-ios-chat-lock[data-lf-mobile-conversation-view="details"] .lf-mobile-details-pane {
        position:fixed !important; top:var(--lf27-top, 0px) !important; bottom:auto !important;
        height:var(--lf27-height, 100dvh) !important; max-height:var(--lf27-height, 100dvh) !important;
        min-height:0 !important;
    }
    body.lf-ios-chat-lock .lf-mobile-chat-pane { height:100% !important; min-height:0 !important; }
    body.lf-ios-chat-lock .chat-header, body.lf-ios-chat-lock .service-control { flex-shrink:0; }
    body.lf-ios-chat-lock #messages-area { flex:1 1 0 !important; min-height:0 !important; overscroll-behavior-y:contain; }
    body.lf-ios-chat-lock #message-input { font-size:16px !important; }
}