.chat-widget-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-toggle-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
    border: none;
    margin-bottom: 20px;
}

.chat-toggle-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Dark header (matches ChatBot icon circle) */
.chat-header {
    background-color: #191D31;
    border-bottom: none;
}

.chat-header-btn {
    color: #fff;
}

    .chat-header-btn i,
    .chat-header-btn .ki-duotone {
        color: #fff !important;
    }

        .chat-header-btn .ki-duotone .path1:before,
        .chat-header-btn .ki-duotone .path2:before {
            color: #fff !important;
            opacity: 1;
        }

    .chat-header-btn:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

/* Send button (matches dark header) */
.chat-send-btn {
    background-color: #191D31;
    color: #fff;
}

    .chat-send-btn:hover:not(:disabled) {
        background-color: #2a3050;
        color: #fff;
    }

    .chat-send-btn:disabled {
        opacity: 0.5;
        color: #fff;
    }

/* Intro robot icon */
.chat-intro-icon {
    width: 64px;
    height: auto;
}

.card-header .btn .path1:before,
.card-header .btn .path2:before {
    color: #fff !important;
}

.chat-widget-panel {
    width: 520px;
    max-width: calc(100vw - 48px);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: chatSlideIn 0.2s ease-out;
}

@@keyframes chatSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-messages {
    height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chat-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    /* Match the user input (.form-control-sm = 0.95rem) so replies read at the same size */
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Message avatars: user = generic silhouette, bot = chatbot icon */
.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bs-gray-200);
}

/* Align suggestion chips under the assistant bubble (avatar width + gap) */
.chat-suggestions {
    margin-left: 40px;
}

.chat-bubble-user {
    background-color: var(--bs-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
    background-color: #f1f3f5;
    color: #1e2a3a;
    border-bottom-left-radius: 4px;
}

.chat-bubble-error {
    background-color: #fff3f3;
    color: #dc3545;
    border: 1px solid #f5c6cb;
}

.chat-input {
    resize: none;
    line-height: 1.4;
}

.chat-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--bs-gray-300);
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .chat-chip:hover:not(:disabled) {
        background: var(--bs-gray-200);
        border-color: var(--bs-gray-400);
        color: var(--bs-gray-800);
    }

    .chat-chip:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.chat-tool-running {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

    .chat-tool-running::after {
        content: '...';
        animation: chatEllipsis 1.2s infinite steps(4, end);
        display: inline-block;
        width: 1.2em;
        overflow: hidden;
        vertical-align: bottom;
    }

@@keyframes chatEllipsis {
    0% {
        width: 0;
    }

    100% {
        width: 1.2em;
    }
}

.chat-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 20px;
}

    .chat-typing span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #6c757d;
        animation: chatBounce 1.2s infinite ease-in-out;
    }

        .chat-typing span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .chat-typing span:nth-child(3) {
            animation-delay: 0.4s;
        }

@@keyframes chatBounce {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.chat-expanded {
    inset: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1055;
    gap: 0;
}

    .chat-expanded .chat-widget-panel {
        width: min(760px, 94vw);
        max-width: 94vw;
        animation: chatExpand 0.2s ease-out;
    }

    .chat-expanded .chat-messages {
        height: calc(80vh - 130px);
        max-height: 640px;
    }

    .chat-expanded .chat-toggle-btn {
        display: none;
    }

@@keyframes chatExpand {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #e8f0fe;
    border: 1px solid #c5d8fc;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #1a56db;
    max-width: 180px;
}

.chat-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.chat-file-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

    .chat-file-remove:hover {
        color: #dc2626;
    }

.chat-bubble:has(.chat-table) {
    max-width: 98%;
    overflow-x: auto;
}

.chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.775rem;
    margin: 4px 0;
    white-space: nowrap;
}

    .chat-table th,
    .chat-table td {
        padding: 4px 10px;
        border: 1px solid #dee2e6;
        text-align: left;
    }

    .chat-table thead th {
        background-color: #e2e8f0;
        font-weight: 600;
        color: #344563;
    }

    .chat-table tbody tr:nth-child(even) td {
        background-color: #f8f9fa;
    }

/* ======================================================================
   Mapa Prospecao
   ====================================================================== */
/* A faixa de adicao de empresas usa as classes da Toolbar da Base (app-toolbar toolbar-color) so
   pelo aspeto. A Toolbar do tema e' fixa e tem 55px de altura (o body traz data-kt-app-toolbar-fixed),
   o que aqui poria a faixa por cima do mapa e cortaria a segunda linha: por isso volta ao fluxo e a
   altura fica livre. Os !important sao precisos porque as regras do tema tem seletores mais fortes. */
.prospect-toolbar {
    position: static !important;
    height: auto !important;
    /* Anula o padding horizontal do .app-container (20px, 30px a partir de lg) para a faixa ir de
       bordo a bordo; o .app-container interior repoe-no, alinhando o conteudo com o mapa. */
    margin-left: -20px;
    margin-right: -20px;
}

@media (min-width: 992px) {
    .prospect-toolbar {
        margin-left: -30px;
        margin-right: -30px;
    }

    /* Sobe o bloco para junto do cabecalho. A escala de espacamentos do tema para aqui em n20
       (-5rem) e a regra em falta nao pode viver no projeto Base, que e' partilhado: fica aqui,
       ao lado do unico sitio que a usa. O !important e' preciso para ganhar ao mt-n5 do Bootstrap,
       que tambem e' !important. */
    .prospect-pull-up {
        margin-top: -5.25rem !important;
    }
}

/* ======================================================================
   Mapa de Leads (/EntityList/3)
   ====================================================================== */
/* O botão vive fora da Toolbar da Base (que não tem ponto de extensão) e é colocado sobre ela:
   a faixa .app-toolbar é fixa, começa no fim do sidebar e tem 55px de altura. O lado esquerdo
   da Toolbar está vazio na lista de leads, exceto quando há filtros aplicados. */
.leads-map-launcher {
    position: fixed;
    top: calc(var(--bs-app-header-height, 60px) + 11px);
    left: calc(var(--bs-app-sidebar-width, 265px) + 30px);
    z-index: 100;
}

@media (max-width: 991.98px) {
    /* Abaixo de lg o sidebar é off-canvas e a Toolbar deixa de ser fixa */
    .leads-map-launcher {
        top: calc(var(--bs-app-header-height, 60px) + var(--bs-app-header-mobile-height, 0px) + 10px);
        left: 20px;
    }
}

/* Mapa encostado à direita, do fim da Toolbar ao fundo do ecrã. A largura é a mesma que a lista da
   Base liberta (--leads-map-width, ver wwwroot/css/leadsmap.css), para as duas metades encaixarem.
   max-height/overflow garantem que nada passa do ecrã, mesmo que uma variável do tema venha vazia
   e o calc do top fique inválido. */
.leads-map-panel {
    position: fixed;
    top: calc(var(--bs-app-header-height, 60px) + var(--bs-app-toolbar-height, 55px));
    right: 0;
    bottom: 0;
    width: var(--leads-map-width, 40vw);
    max-height: 100vh;
    overflow: hidden;
    z-index: 98;
}

@media (max-width: 991.98px) {
    /* Num ecrã estreito o mapa ocupa tudo: não há espaço para lista e mapa lado a lado */
    .leads-map-panel {
        top: calc(var(--bs-app-header-height, 60px) + var(--bs-app-header-mobile-height, 0px) + 55px);
        left: 0;
        width: auto;
    }
}

/* min-height:0 deixa o flex encolher: sem isto o mapa empurra o rodapé para fora do painel */
.leads-map-body {
    min-height: 0;
}

.leads-map {
    width: 100%;
    height: 100%;
}

/* ======================================================================
   Mapa de Leads: encolher a lista da Base
   ====================================================================== */
/* Vista dividida do Mapa de Leads (/EntityList/3): a lista da Base encolhe e o mapa encosta-se à
   direita. Não pode ser CSS isolado do LeadsMapLauncher porque a área que encolhe (.app-content) é
   da página da Base - o componente marca o body com .leads-map-split enquanto o mapa está aberto. */
body.leads-map-split .app-content {
    padding-right: var(--leads-map-width, 40vw);
    transition: padding-right .2s ease;
}

@media (max-width: 991.98px) {
    /* Num ecrã estreito o mapa ocupa tudo, não há lista ao lado para encolher */
    body.leads-map-split .app-content {
        padding-right: 0;
    }
}