/* ==========================================================================
 * chat-message-content.css — ESTILO DO CORPO DAS MENSAGENS DA NIA
 *
 * ARQUIVO COMPARTILHADO entre o b1lite (web) e o chat da Nia desktop
 * (niaclient/src/NiaClient/ChatAssets/). Ao alterar, altere aqui e copie para o
 * ChatAssets — verify-shared-css.cjs falha se os dois lados divergirem.
 *
 * POR QUE EXISTE: estas regras moravam em css/style.css, que NAO e' copiado
 * para o bundle do desktop. O desktop carrega apenas assistant-ai.css,
 * highlight-custom.css e chat-desktop.css, logo TODO o corpo das respostas da
 * Nia (paragrafos, listas, links, negrito, codigo, pre, tabelas, titulos)
 * renderizava com defaults do navegador: sem borda de tabela, sem fundo de
 * bloco de codigo, sem indentacao de lista.
 *
 * CORES: cada cor mantem a cadeia var(--sap*) original e troca APENAS o literal
 * final por um token var(--ai-*). No web nada muda — as variaveis do tema UI5
 * resolvem primeiro, exatamente como antes. No desktop, onde nenhuma --sap*
 * existe, a cadeia cai no token --ai-*, que o B1Theme.cs sobrescreve com a
 * paleta do skin do SAP. E' o contrato que chat-desktop.css exige.
 *
 * ORDEM DE CARGA no web: IMEDIATAMENTE apos style.css (era de onde saiu) e
 * ANTES de assistant-ai.css, para a cascata continuar identica.
 * ========================================================================== */

/* =====================================================
   Chat.view.xml — conteúdo HTML renderizado na Timeline
   ===================================================== */
.chatMessageContent {
    max-width: 100% !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.4 !important;
}

/* Wrapper equivalente ao .chatMessageContent para o chat overlay.
   No overlay nao usamos `white-space: pre-wrap` (ja controlado pelo .chatBubble)
   e mantemos `line-height` do bubble para nao conflitar com a animacao de
   messageAppear. Reaproveita todas as regras filhas (`*`, table, ul, pre, etc.)
   combinando com .chatMessageContent na classe do wrapper. */
.chatBubbleContent {
    max-width: 100% !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.chatMessageContent * {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chatMessageContent ol,
.chatMessageContent ul {
    padding-left: 1.4em;
    margin: 0.25em 0;
}

.chatMessageContent table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.9em;
    color: var(--sapTextColor, var(--ai-text-primary));
    /* Permite scroll horizontal em telas estreitas (≤480px) quando a tabela tem
       mais colunas que cabem — sem isso, o conteúdo corta invisível por causa
       do overflow:visible do parent (item da Timeline). */
    overflow-x: auto;
    display: block;
}

@media (min-width: 600px) {
    .chatMessageContent table {
        display: table;
        overflow-x: visible;
    }
}

.chatMessageContent td,
.chatMessageContent th {
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 6px 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    color: var(--sapTextColor, var(--ai-text-primary));
    /* Reforço visual: box-shadow inset garante linha visível mesmo quando
       a cor de borda do tema é fraca (ex: dark mode). Combina com o border
       lateral para uma "grade" contínua de células. */
    box-shadow: inset -1px 0 0 0 var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light))),
                inset 0 -1px 0 0 var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
}

.chatMessageContent th {
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    font-weight: 600;
    color: var(--sapHeaderTextColor, var(--sapTextColor, var(--ai-text-primary)));
}

.chatMessageContent pre {
    /* Borda sutil usa a cor de borda do tema (sapUiGroupBorderColor) — vira
       visível em dark mode e hcb. Fundo é a variante "tile" do tema. */
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    margin: 6px 0;
    color: var(--sapTextColor, var(--ai-text-primary));
}

.chatMessageContent code {
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--sapTextColor, var(--ai-text-primary));
}

/* Mesmas regras aplicadas dentro do chat overlay (chatBubbleText injeta o
   HTML de linkifyMessage, mas não fica dentro de .chatMessageContent).
   Mantém o overlay visualmente consistente com a view do chat em todos os temas. */
.chatBubbleText pre,
.chatOverlayMessages pre {
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    margin: 6px 0;
    color: var(--sapTextColor, var(--ai-text-primary));
}

.chatBubbleText code,
.chatOverlayMessages code {
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--sapTextColor, var(--ai-text-primary));
}

.chatBubbleText a,
.chatOverlayMessages a {
    color: var(--sapLinkColor, var(--ai-primary-color));
    word-break: break-word;
}

.chatBubbleText a:hover,
.chatOverlayMessages a:hover {
    color: var(--sapLink_Hover_Color, var(--sapLinkColor, var(--ai-primary-hover)));
    text-decoration: underline;
}

.chatBubbleText a:focus,
.chatOverlayMessages a:focus {
    outline: 2px solid var(--sapFocusColor, var(--ai-border-focus));
    outline-offset: 1px;
}

.chatBubbleText strong,
.chatOverlayMessages strong {
    color: var(--sapTextColor, var(--ai-text-primary));
    font-weight: 600;
}

.chatBubbleText em,
.chatOverlayMessages em {
    color: var(--sapTextColor, var(--ai-text-primary));
    font-style: italic;
}

.chatBubbleText ul,
.chatBubbleText ol,
.chatOverlayMessages ul,
.chatOverlayMessages ol {
    margin: 6px 0 6px 16px;
    padding-left: 16px;
    color: var(--sapTextColor, var(--ai-text-primary));
}

.chatBubbleText ul,
.chatOverlayMessages ul {
    list-style-type: disc;
}

.chatBubbleText ol,
.chatOverlayMessages ol {
    list-style-type: decimal;
}

.chatBubbleText li,
.chatOverlayMessages li {
    margin: 3px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.chatBubbleText h2,
.chatBubbleText h3,
.chatBubbleText h4,
.chatOverlayMessages h2,
.chatOverlayMessages h3,
.chatOverlayMessages h4 {
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--sapHeaderTextColor, var(--sapTextColor, var(--ai-text-primary)));
}

.chatBubbleText h2,
.chatOverlayMessages h2 {
    margin: 12px 0 6px 0;
    font-size: 1.2em;
    font-weight: 600;
}

.chatBubbleText h3,
.chatOverlayMessages h3 {
    margin: 10px 0 5px 0;
    font-size: 1.1em;
    font-weight: 600;
}

.chatBubbleText h4,
.chatOverlayMessages h4 {
    margin: 8px 0 4px 0;
    font-size: 1em;
    font-weight: 600;
}

.chatBubbleText table,
.chatOverlayMessages table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    margin: 8px 0;
    font-size: 0.9em;
    color: var(--sapTextColor, var(--ai-text-primary));
    overflow-x: auto;
    display: block;
}

@media (min-width: 600px) {
    .chatBubbleText table,
    .chatOverlayMessages table {
        display: table;
        overflow-x: visible;
    }
}

.chatBubbleText td,
.chatBubbleText th,
.chatOverlayMessages td,
.chatOverlayMessages th {
    border: 1px solid var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
    padding: 6px 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    color: var(--sapTextColor, var(--ai-text-primary));
    box-shadow: inset -1px 0 0 0 var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light))),
                inset 0 -1px 0 0 var(--sapUiListBorderColor, var(--sapList_BorderColor, var(--ai-border-light)));
}

.chatBubbleText th,
.chatOverlayMessages th {
    background: var(--sapUiExtraLightBG, var(--sapBackgroundColor, var(--ai-bg-chip)));
    font-weight: 600;
    color: var(--sapHeaderTextColor, var(--sapTextColor, var(--ai-text-primary)));
}

.chatMessageContent h2,
.chatMessageContent h3,
.chatMessageContent h4 {
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--sapHeaderTextColor, var(--sapTextColor, var(--ai-text-primary)));
    font-weight: 600;
}

.chatMessageContent h2 {
    margin: 12px 0 6px 0;
    font-size: 1.2em;
}

.chatMessageContent h3 {
    margin: 10px 0 5px 0;
    font-size: 1.1em;
}

.chatMessageContent h4 {
    margin: 8px 0 4px 0;
    font-size: 1em;
}

.chatMessageContent strong {
    color: var(--sapTextColor, var(--ai-text-primary));
    font-weight: 600;
}

.chatMessageContent em {
    color: var(--sapTextColor, var(--ai-text-primary));
    font-style: italic;
}

@media (max-width: 480px) {
    .chatMessageContent {
        font-size: 0.9rem;
        line-height: 1.35 !important;
    }
    .chatMessageContent h2 { font-size: 1.05em; }
    .chatMessageContent h3 { font-size: 1em; }
    .chatMessageContent h4 { font-size: 0.95em; }
    .chatMessageContent pre { font-size: 0.8em; padding: 6px; }
    .chatMessageContent td,
    .chatMessageContent th { padding: 4px 6px; font-size: 0.85em; }
}

.chatMessageContent a {
    /* Paridade com .chatBubbleText a / .chatOverlayMessages a (overlay já tem).
       Sem esta regra, o <a> do chat view herda a cor padrão do tema e fica
       invisível contra o background do <pre><code> em alguns temas. */
    color: var(--sapLinkColor, var(--ai-primary-color));
    word-break: break-word;
}

/* Messages - �rea central com scroll */
        /* Sem position:absolute de proposito. A area de mensagens e' o filho
           flex:1 da coluna do painel (ver .chatOverlayPanel e as regras de
           .sapUiVltCell em assistant-ai.css): header e footer reservam o
           proprio espaco. Posicionada de forma absoluta, ela precisaria de um
           top/bottom fixo igual a altura deles — e o footer cresce quando a
           barra de consumo de tokens aparece, escondendo as ultimas linhas da
           conversa atras dele. */
        #chatOverlayContainer .chatOverlayMessages,
        .chatOverlayPanel > .chatOverlayMessages {
            background: #f4f4f8;
            padding: 8px 12px;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.chatBubbleText {
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
}
/* ChatTableExport: wrapper + toolbar separados para nao serem cortados por overflow da tabela */
.chatTableWrapper {
    position: relative;
    display: block;
    margin: 6px 0;
    padding-top: 24px; /* espaco para o toolbar nao cobrir o thead */
}

.chatTableWrapper > .chatTableToolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--sapButtonColorBackground, #0a6ed1);
    border: 1px solid var(--sapButtonColorBorder, #0a6ed1);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.chatTableWrapper:not(.isStreaming) > .chatTableToolbar > .chatTableExportBtn {
    display: inline-flex;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn:hover,
.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn:focus {
    background: var(--sapButtonColorBackgroundHover, #085caf);
    border-color: var(--sapButtonColorBorderHover, #085caf);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    outline: none;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn:active {
    background: var(--sapButtonColorBackgroundActive, #085caf);
    border-color: var(--sapButtonColorBorderActive, #085caf);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn .chatTableExportIcon {
    flex: 0 0 auto;
    color: currentColor;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportBtn .chatTableExportLabel {
    white-space: nowrap;
}

.chatTableWrapper > .chatTableInner {
    /* Garante que a tabela nao corte o botao que esta em .chatTableToolbar */
    position: relative;
    overflow: visible !important;
}

/* Menu dropdown: posicionado relativo ao toolbar (irmao do botao) */
.chatTableWrapper > .chatTableToolbar > .chatTableExportMenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 3;
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px 0;
    min-width: 160px;
    background: var(--sapGroup_ContentBackground, var(--ai-bg-card, #ffffff));
    border: 1px solid var(--sapUiListBorderColor, var(--ai-border-light, #e5e5e5));
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    color: var(--sapTextColor, var(--ai-text-primary, #1d1d1d));
    font-size: 0.85em;
    overflow: hidden;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportMenu li {
    list-style: none;
    padding: 8px 14px;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
    transition: background-color 0.1s ease;
}

.chatTableWrapper > .chatTableToolbar > .chatTableExportMenu li:hover {
    background: var(--sapUiHoverBackground, var(--ai-bg-chip-hover, #f0f6ff));
}

@media (max-width: 480px) {
    .chatTableWrapper > .chatTableToolbar > .chatTableExportBtn {
        font-size: 0.72em;
        padding: 2px 8px;
    }
    .chatTableWrapper > .chatTableToolbar > .chatTableExportBtn .chatTableExportLabel {
        display: none;
    }
}