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

        /* Classe para screen readers movida para assets/css/site.css */

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #e5ded8; /* Fundo estilo WhatsApp */
            /* Usar unidades de viewport dinâmicas para evitar espaço em branco no fim em mobile */
            min-height: 100svh;
            min-height: 100dvh;
            width: 100vw;
            overflow-x: hidden;
            font-size: 16px; /* Tamanho de fonte mais adequado */
            margin: 0;
            padding: 0;
        }

        /* Variáveis e base responsiva */

        :root {
            /* Altura da tarja fixa de doações no rodapé */
            --donation-bar-height: clamp(calc(48px * var(--ui-scale)), calc(8vh * var(--ui-scale)), calc(72px * var(--ui-scale)));
            /* Altura inicial da área superior (intro/cards) no split */
            --split-top-height: 300px;
            /* Escala fluida para ampliar UI em telas grandes */
            --ui-scale: 1;
        }

        /* Mobile: deixar mais espaço para o chat por padrão */
        @media (max-width: 480px) {
            :root { --split-top-height: 220px; }
        }
        /* Aumentar escala em telas maiores */
        @media (min-width: 1200px) { :root { --ui-scale: 1.08; } }
        @media (min-width: 1440px) { :root { --ui-scale: 1.18; } }
        @media (min-width: 1600px) { :root { --ui-scale: 1.26; } }

        /* Tipografia base fluida */
        body { font-size: calc(16px * var(--ui-scale)); }

        .chat-container {
            width: 100%;
            max-width: 1440px; /* ainda mais amplo em desktop */
            height: 100dvh; /* ocupa altura total da viewport, inclusivo em mobile */
            background: white;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }

        /* Container principal de conteúdo em coluna para o chat ocupar o espaço entre header e input */
        main {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0; /* necessário para que o filho flex (chat-messages) calcule altura corretamente */
            gap: 0; /* remover espaço para que resizer fique flush ao input */
        }

        /* Layout de divisão móvel entre intro/cards e chat */
        .split-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 0; /* permitir filhos flex rolarem */
            flex: 1 1 auto; /* ocupar todo o espaço disponível do main */
        }

        .split-top {
            flex: 0 0 var(--split-top-height);
            min-height: 0; /* permitir colapsar até o fim do header */
            overflow: auto; /* permitir rolagem quando alto demais */
        }

        .split-resizer {
            height: calc(22px * var(--ui-scale));
            flex: 0 0 calc(22px * var(--ui-scale));
            cursor: row-resize;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.06);
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.08);
            color: #666;
            font-size: calc(14px * var(--ui-scale));
            line-height: calc(22px * var(--ui-scale));
            position: relative; /* para posicionar tooltip */
            z-index: 20; /* garantir acima do input no primeiro paint */
        }

        .split-resizer::before {
            content: '↕ ' attr(data-drag-label);
        }

        .split-resizer.dragging {
            background: rgba(255, 202, 40, 0.25);
        }

        /* Tooltip discreto ao passar o mouse (apenas em dispositivos com hover/pointer fino) */
        @media (hover: hover) and (pointer: fine) {
            .split-resizer:hover::after {
                content: attr(data-drag-tooltip);
                position: absolute;
                top: calc(-32px * var(--ui-scale));
                left: 50%;
                transform: translateX(-50%);
                font-size: calc(14px * var(--ui-scale));
                color: #fff;
                background: rgba(0,0,0,0.6);
                padding: calc(4px * var(--ui-scale)) calc(10px * var(--ui-scale));
                border-radius: 6px;
                white-space: nowrap;
                pointer-events: none;
                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
                z-index: 5;
            }
        }

        body.split-dragging {
            cursor: row-resize;
        }

        .split-bottom {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto; /* ocupar o restante do espaço */
            min-height: 0; /* permitir rolagem interna do chat-messages */
        }

        /* Garantir que chat-messages expanda dentro da parte inferior */
        .split-bottom > #chatMessages {
            flex: 1 1 auto;
            min-height: 0;
        }

        .split-bottom > .chat-input-container {
            flex: 0 0 auto;
        }

        /* Evitar que o input crie um stacking acima do resizer no primeiro paint */
        .chat-input-container {
            position: relative;
            z-index: 0;
        }

        /* Em mobile manter seta + rótulo vindo do data-attr (i18n) */
        @media (max-width: 480px) {
            .split-resizer::before { content: '↕ ' attr(data-drag-label); }
        }

        /* Responsividade para telas largas (desktop) */
        @media (min-width: 1024px) {
            .chat-container {
                max-width: 1440px;
            }
            /* A tarja ocupa 100% da largura da viewport; conteúdo já é centralizado por .donation-container */
        }

        /* Telas muito largas (ex.: 1600px+) */
        @media (min-width: 1600px) {
            .chat-container { max-width: 1600px; }
            .donation-container { max-width: 1600px; }
        }

        .chat-header {
            background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%);
            color: white;
            padding: calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale)); /* mais espaço para respirar */
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: calc(12px * var(--ui-scale));
            border-radius: 0 0 12px 12px; /* cantos arredondados na parte inferior */
        }

        /* Título principal com ícone */
        .header-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: calc(16px * var(--ui-scale));
            font-weight: 700;
            margin: 0;
            white-space: normal; /* permitir quebra em telas pequenas */
            overflow: visible;
            text-overflow: unset;
            word-break: break-word;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        /* Ícone do título vindo de assets (substitui o emoji) */
        .header-title::before {
            content: "";
            display: inline-block;
            width: calc(22px * var(--ui-scale));
            height: calc(22px * var(--ui-scale));
            background-image: url('/assets/icons/32.png');
            background-size: cover;
            background-position: center;
            border-radius: 4px; /* discreto, acompanha estética atual */
        }
        
        /* Container para os controles (botões e idioma) */
.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(12px * var(--ui-scale));
    width: 100%;
}

/* Padronizar ordem dos blocos no header: 1) modo, 2) limpar conversa, 3) idioma+instalar */
.header-controls .mode-selector { order: 1; }
.header-controls .utility-actions { order: 2; }
.header-controls .lang-container { order: 3; }

/* Evitar que utility-actions empurre os demais, mantendo ordem visual consistente */
.header-controls .utility-actions { flex-grow: 0; }
        
        /* Ajustes responsivos para o cabeçalho */
        @media (max-width: 600px) {
            .chat-header {
                padding: 12px 16px;
                gap: 8px;
            }
            
            .header-title {
                font-size: 14px;
                padding-bottom: 6px;
            }
            
            .header-title::before {
                width: 18px;
                height: 18px;
            }
        }
        
        /* Container para o seletor de idioma */
.lang-container {
    min-width: 120px;
    flex-shrink: 0;
    display: block;
}

        .chat-messages {
            flex: 1;
            padding: 16px 20px;
            overflow-y: scroll;
            overscroll-behavior-y: contain;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable;
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURf///+Xl5f7+/vHx8e7u7vj4+Pb29vz8/Pv7+/Pz8/39/eTk5OPj44tBIHMAAAABdFJOUwBA5thmAAAAxklEQVRo3u3ZMQ7DIBBFQQzs4oX7X9jKJimSJgEhO/NU/gWjJVIUAAAAAAAAAAAAAAAA/6dN+TZ5SZJk9JJTkqTtkqOkqrqsJ0nHJVdJUq9LdknbJYckqfUlL0nVdVlPko5LrpKk3pfcJG2XHJKk1pfcJG2XHJKk1pfskqrqsp4k9SWHpOq6rCdJ2yWXJKn0JRdJvS7ZJW2XHJKk1pe8JFXXZT1JOi65SpJ6X3KTtF1ySJJaX7JLqqrLepLUlxySqqusp4k9SXpLAgAAAAAAAAAAAAAAAH7XB3DBgRB0jxX5AAAAAElFTkSuQmCC');
            min-height: 0;
            border-top: none;
            box-shadow: none;
            padding-bottom: 0; /* não reservar espaço físico; usar scroll-padding via JS */
        }

        /* Nova seção de introdução e sugestões fora da área rolável de mensagens */
        .chat-intro {
            padding: 0 16px; /* ~20% menor */
            background: #ffffff;
            flex-shrink: 0;
            max-height: none; /* permitir expansão total controlada pelo flex-basis */
            overflow-y: auto;
            border-bottom: 1px solid #e0e0e0;
        }
        /* Remover limite de largura do Bootstrap container dentro da intro */
        .chat-intro.container {
            max-width: 100% !important;
            width: 100% !important;
        }

        /* Aparência da barra de rolagem (Chrome/Edge/Safari) */
        .chat-messages::-webkit-scrollbar {
            width: 10px;
        }
        .chat-messages::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.06);
            border-radius: 8px;
        }
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(34, 197, 94, 0.45);
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.6);
        }
        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(34, 197, 94, 0.6);
        }

        /* Aparência da barra de rolagem (Firefox) */
        .chat-messages {
            scrollbar-width: thin; /* fino */
            scrollbar-color: rgba(34, 197, 94, 0.6) rgba(0,0,0,0.08);
        }

        .message {
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-content {
            max-width: 75%;
            padding: 16px 20px; /* aumentar um pouco mais */
            border-radius: 12px; /* bordas um pouco mais suaves */
            word-wrap: break-word;
            line-height: 1.65; /* leitura mais confortável */
            font-size: 19px; /* subir mais um ponto */
        }

        .message.user .message-content {
            background-color: #dcf8c6; /* Verde claro estilo WhatsApp */
            color: #303030;
            border-bottom-right-radius: 4px;
            font-weight: 400;
        }

        .message.bot .message-content {
            background: white;
            color: #303030;
            border: none;
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .message-avatar {
            width: 56px; /* Avatar reduzido para tamanho mais equilibrado */
            height: 56px;
            border-radius: 50%;
            margin: 0 20px; /* Espaço reduzido ao redor do avatar */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 24px; /* Texto do avatar reduzido para tamanho mais equilibrado */
        }

        .message.user .message-avatar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            order: 1;
        }

        .message.bot .message-avatar {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        }

        .chat-input-container {
            padding: 14px 20px 20px 20px;
            background: white;
            border-top: none;
            flex-shrink: 0;
            /* Suporte para safe-area-inset em dispositivos com notch/barra de navegação */
            padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
            /* Fluxo normal: não usar sticky/fixed para evitar sobreposição */
            position: relative;
        }

        .chat-input-form {
            display: flex;
            gap: 15px; /* Mais espaço entre input e botão */
        }

        .chat-input {
            flex: 1;
            padding: calc(12px * var(--ui-scale)) calc(22px * var(--ui-scale)); /* mais amplo em telas grandes */
            border: 2px solid #e0e0e0; /* borda mais fina */
            border-radius: calc(22px * var(--ui-scale)); /* raio ajustado */
            font-size: calc(18px * var(--ui-scale)); /* fonte fluida */
            outline: none;
            transition: border-color 0.3s ease;
            font-family: inherit;
        }

        .chat-input:focus {
            border-color: #667eea;
        }

        .send-button {
            padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)); /* mais amplo em telas grandes */
            background: linear-gradient(135deg, #FFCA28 0%, #F9A825 100%);
            color: white;
            border: none;
            border-radius: calc(22px * var(--ui-scale)); /* raio ajustado */
            cursor: pointer;
            font-size: calc(18px * var(--ui-scale)); /* fonte fluida */
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            white-space: nowrap;
            box-shadow: 0 8px 22px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(34, 197, 94, 0.12) inset;
        }

        .send-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.15) inset;
        }

        .send-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Estilos para o indicador de obra selecionada */
        .selected-work-indicator {
            margin-bottom: 10px; /* menor */
            animation: slideDown 0.3s ease-out;
        }

        .selected-work-content {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border: 1px solid #667eea; /* mais fino */
            border-radius: 14px; /* menor */
            padding: 8px 14px; /* menor */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; /* menor */
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18); /* menor */
        }

        .selected-work-icon {
            font-size: 18px; /* menor */
        }

        .selected-work-text {
            color: #333;
            font-size: 16px; /* menor */
            font-weight: 500;
        }

        .selected-work-text strong {
            color: #667eea;
            font-weight: 700;
        }

        .remove-work-btn {
            background: #ff4757;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin-left: 10px;
        }

        .remove-work-btn:hover {
            background: #ff3742;
            transform: scale(1.1);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .typing-indicator {
            display: none;
            padding: 18px 22px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            border-bottom-left-radius: 6px;
            max-width: 75%;
            margin-bottom: 25px;
        }

        .typing-dots {
            display: flex;
            gap: 6px;
        }

        .typing-dot {
            width: 14px; /* Dots reduzidos para tamanho mais equilibrado */
            height: 14px;
            background: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }

        @keyframes typing {
            0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

        .welcome-message {
            text-align: center;
            color: #666;
            padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale));
            font-style: italic;
            font-size: calc(15px * var(--ui-scale));
            line-height: 1.35; /* ~20% menor */
        }
        
        /* Remover limite de largura do Bootstrap container dentro da intro */
        .chat-intro.container {
            max-width: 100% !important;
            width: 100% !important;
        }

        /* Aparência da barra de rolagem (Chrome/Edge/Safari) */
        .chat-messages::-webkit-scrollbar {
            width: 10px;
        }
        .chat-messages::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.06);
            border-radius: 8px;
        }
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(34, 197, 94, 0.45);
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.6);
        }
        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(34, 197, 94, 0.6);
        }

        /* Aparência da barra de rolagem (Firefox) */
        .chat-messages {
            scrollbar-width: thin; /* fino */
            scrollbar-color: rgba(34, 197, 94, 0.6) rgba(0,0,0,0.08);
        }

        .message {
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-content {
            max-width: 75%;
            padding: 16px 20px; /* aumentar um pouco mais */
            border-radius: 12px; /* bordas um pouco mais suaves */
            word-wrap: break-word;
            line-height: 1.65; /* leitura mais confortável */
            font-size: 19px; /* subir mais um ponto */
        }

        .message.user .message-content {
            background-color: #dcf8c6; /* Verde claro estilo WhatsApp */
            color: #303030;
            border-bottom-right-radius: 4px;
            font-weight: 400;
        }

        .message.bot .message-content {
            background: white;
            color: #303030;
            border: none;
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .message-avatar {
            width: 56px; /* Avatar reduzido para tamanho mais equilibrado */
            height: 56px;
            border-radius: 50%;
            margin: 0 20px; /* Espaço reduzido ao redor do avatar */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 24px; /* Texto do avatar reduzido para tamanho mais equilibrado */
        }

        .message.user .message-avatar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            order: 1;
        }

        .message.bot .message-avatar {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        }

        .chat-input-container {
            padding: 14px 20px 20px 20px;
            background: white;
            border-top: none;
            flex-shrink: 0;
            /* Suporte para safe-area-inset em dispositivos com notch/barra de navegação */
            padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
            /* Fluxo normal: não usar sticky/fixed para evitar sobreposição */
            position: relative;
        }

        .chat-input-form {
            display: flex;
            gap: 15px; /* Mais espaço entre input e botão */
        }

        .chat-input {
            flex: 1;
            padding: calc(12px * var(--ui-scale)) calc(22px * var(--ui-scale)); /* mais amplo em telas grandes */
            border: 2px solid #e0e0e0; /* borda mais fina */
            border-radius: calc(22px * var(--ui-scale)); /* raio ajustado */
            font-size: calc(18px * var(--ui-scale)); /* fonte fluida */
            outline: none;
            transition: border-color 0.3s ease;
            font-family: inherit;
        }

        .chat-input:focus {
            border-color: #667eea;
        }

        .send-button {
            padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)); /* mais amplo em telas grandes */
            background: linear-gradient(135deg, #FFCA28 0%, #F9A825 100%);
            color: white;
            border: none;
            border-radius: calc(22px * var(--ui-scale)); /* raio ajustado */
            cursor: pointer;
            font-size: calc(18px * var(--ui-scale)); /* fonte fluida */
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            white-space: nowrap;
            box-shadow: 0 8px 22px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(34, 197, 94, 0.12) inset;
        }

        .send-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.15) inset;
        }

        .send-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Estilos para o indicador de obra selecionada */
        .selected-work-indicator {
            margin-bottom: 10px; /* menor */
            animation: slideDown 0.3s ease-out;
        }

        .selected-work-content {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border: 1px solid #667eea; /* mais fino */
            border-radius: 14px; /* menor */
            padding: 8px 14px; /* menor */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; /* menor */
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18); /* menor */
        }

        .selected-work-icon {
            font-size: 18px; /* menor */
        }

        .selected-work-text {
            color: #333;
            font-size: 16px; /* menor */
            font-weight: 500;
        }

        .selected-work-text strong {
            color: #667eea;
            font-weight: 700;
        }

        .remove-work-btn {
            background: #ff4757;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin-left: 10px;
        }

        .remove-work-btn:hover {
            background: #ff3742;
            transform: scale(1.1);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .typing-indicator {
            display: none;
            padding: 18px 22px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            border-bottom-left-radius: 6px;
            max-width: 75%;
            margin-bottom: 25px;
        }

        .typing-dots {
            display: flex;
            gap: 6px;
        }

        .typing-dot {
            width: 14px; /* Dots reduzidos para tamanho mais equilibrado */
            height: 14px;
            background: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }

        @keyframes typing {
            0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

        .welcome-message {
            text-align: center;
            color: #666;
            padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale));
            font-style: italic;
            font-size: calc(15px * var(--ui-scale));
            line-height: 1.35; /* ~20% menor */
        }

        .work-selection-buttons {
            gap: 8px; /* ~20% menor */
            margin: 12px 0; /* ~20% menor */
            max-width: none; /* permitir ocupar toda a largura disponível */
        }

        /* Em telas menores, empilhar verticalmente */
        @media (max-width: 768px) {
            .work-selection-buttons {
                flex-direction: column;
                max-width: none;
            }
            
            .work-button {
                min-width: auto;
                max-width: none;
            }
        }

        /* Em telas muito pequenas */
        @media (max-width: 480px) {
            .work-button {
                /* Aumentar levemente em mobile mantendo responsividade por largura */
                font-size: clamp(15px, 3.9vw, 17px);
                padding: 13px 18px;
            }
        }

        .work-button {
            padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: calc(13px * var(--ui-scale));
            cursor: pointer;
            font-size: calc(13px * var(--ui-scale));
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 7px rgba(102, 126, 234, 0.25); /* sombra levemente menor */
            flex: 1;
            min-width: 200px; /* ~20% menor */
            max-width: 240px; /* ~20% menor */
            text-align: center;
            white-space: normal; /* permitir múltiplas linhas */
            overflow-wrap: anywhere; /* quebra mesmo em strings longas */
            word-break: break-word; /* segurança extra para quebra */
            line-height: 1.25; /* melhor legibilidade em 2+ linhas */
        }

        .work-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }

        .work-button:active {
            transform: translateY(-1px);
        }

        .instruction-text {
            font-size: 12px !important; /* ~20% menor */
            color: #888 !important;
            margin-top: 12px !important; /* ~20% menor */
            font-style: normal !important;
        }

        .error-message {
            background: #ffebee;
            color: #c62828;
            padding: calc(24px * var(--ui-scale)) calc(30px * var(--ui-scale));
            border-radius: 16px;
            margin: 20px 0;
            border-left: 7px solid #c62828;
            font-size: calc(24px * var(--ui-scale));
        }

        /* Estilos para markdown renderizado */
        .message-content h1,
        .message-content h2,
        .message-content h3,
        .message-content h4,
        .message-content h5,
        .message-content h6 {
            margin: 16px 0 12px 0;
            font-weight: 600;
            line-height: 1.4;
        }

        .message-content h1 { font-size: calc(32px * var(--ui-scale)); }
        .message-content h2 { font-size: calc(30px * var(--ui-scale)); }
        .message-content h3 { font-size: calc(28px * var(--ui-scale)); }
        .message-content h4 { font-size: calc(26px * var(--ui-scale)); }
        .message-content h5 { font-size: calc(25px * var(--ui-scale)); }
        .message-content h6 { font-size: calc(24px * var(--ui-scale)); }

        .message-content p {
            margin: 12px 0;
            line-height: 1.6;
        }

        .message-content ul,
        .message-content ol {
            margin: 12px 0;
            padding-left: 25px;
        }

        .message-content li {
            margin: 8px 0;
            line-height: 1.6;
        }

        .message-content blockquote {
            border-left: 4px solid #ddd;
            margin: 16px 0;
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            font-style: italic;
        }

        .message-content code {
            background: rgba(0, 0, 0, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 18px; /* menor */
        }

        .message-content pre {
            background: rgba(0, 0, 0, 0.1);
            padding: 16px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 16px 0;
        }

        .message-content pre code {
            background: none;
            padding: 0;
        }

        .message-content strong {
            font-weight: 700;
        }

        .message-content em {
            font-style: italic;
        }

        /* Responsividade para mobile */
        @media (max-width: 768px) {
            body {
                font-size: 16px;
            }

            .chat-header {
                padding: 12px 16px;
            }

            .chat-header h1 {
                font-size: 20px;
            }

            .chat-header p {
                font-size: 14px;
            }

            .chat-messages {
                padding: 12px 16px;
            }

            .message-content {
                max-width: 88%;
                font-size: 17px; /* subir um pouco mais no mobile */
                padding: 14px 18px; /* aumentar um pouco mais no mobile */
                line-height: 1.6; /* manter legível */
                border-radius: 12px;
            }

            .message-avatar {
                width: 40px;
                height: 40px;
                margin: 0 10px;
                font-size: 16px;
            }

            .chat-input-container {
                padding: 16px 16px 20px 16px; /* reduzir espaço em mobile/tablet */
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
            }

            .chat-input {
                padding: 14px 18px; /* achatado no tablet */
                font-size: 18px;
            }

            .send-button {
                padding: 14px 20px; /* achatado no tablet */
                font-size: 18px;
            }

            .welcome-message {
                font-size: 14px; /* reduzir no mobile para não inflar textos introdutórios */
                padding: 12px 14px;
            }

            /* Heading sobre perguntas sugeridas (apenas mobile) */
            #adultHeading {
                font-size: 14px;
                line-height: 1.3;
            }

            /* Reduzir tipografia dos itens de introdução no mobile */
            .intro-details summary { font-size: 14px; }
            .intro-highlights { font-size: 14px; }
            .intro-highlights li { line-height: 1.35; }

            .error-message {
                font-size: 22px;
                padding: 22px 26px;
            }

            /* Ajustes de markdown para mobile */
            .message-content h1 { font-size: 28px; }
            .message-content h2 { font-size: 26px; }
            .message-content h3 { font-size: 25px; }
            .message-content h4 { font-size: 24px; }
            .message-content h5 { font-size: 23px; }
            .message-content h6 { font-size: 22px; }

            /* Estilos responsivos para o indicador de obra */
            .selected-work-text {
                font-size: 16px;
            }

            .selected-work-icon {
                font-size: 18px;
            }

            .remove-work-btn {
                width: 22px;
                height: 22px;
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            /* Ocultar subtítulo para reduzir altura em telas muito pequenas */
            .chat-header p { display: none; }

            .chat-input-container {
                padding: 12px 16px 20px 16px;
                /* Suporte para safe-area-inset em dispositivos móveis */
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
                /* Garantir que o container não seja cortado */
                min-height: auto;
                max-height: none;
                background: #f0f0f0;
                position: relative;
            }

            .chat-input-form {
                flex-direction: row;
                gap: 10px;
                width: 100%;
            }

            .chat-input {
                flex: 1;
                padding: 10px 14px;
                font-size: 15px;
                border-radius: 20px;
                background: white;
            }

            .send-button {
                width: auto;
                padding: 10px 14px;
                font-size: 15px;
                border-radius: 20px;
                background: #128C7E;
                color: white;
                min-width: 60px;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            /* Ajustar o container de mensagens para dar mais espaço ao input */
            .chat-messages {
                padding-bottom: 20px;
            }
        }

        /* Media query para telas muito pequenas (menos de 360px) */
        @media (max-width: 360px) {
            .chat-input-container {
                padding: 12px 12px 20px 12px; /* padding inferior compacto */
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
            }

            .chat-input {
                padding: 16px 20px;
                font-size: 18px;
            }

            .send-button {
                padding: 16px 18px;
                font-size: 18px;
            }

            .chat-header {
                padding: 12px 14px; /* mais compacto em telas muito pequenas */
            }

            .chat-header h1 {
                font-size: 24px; /* menor para reduzir altura */
            }

            .chat-header p {
                font-size: 14px; /* menor para reduzir altura */
            }

            .chat-messages {
                padding: 20px 15px;
            }
        }

        /* Media query específica para dispositivos Android com barras de navegação altas (como Motorola Edge) */
        @media (max-width: 480px) and (min-height: 700px) {
            .chat-input-container {
                padding: 16px 16px 20px 16px !important; /* manter compacto mesmo em telas altas */
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
            }
        }

        /* Para dispositivos muito altos (como alguns Motorola, Samsung, etc.) */
        @media (max-width: 480px) and (min-height: 800px) {
            .chat-input-container {
                padding: 16px 16px 20px 16px !important; /* manter compacto mesmo em telas mais altas */
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
            }
        }

        /* Garantir que o layout funcione bem em landscape mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .chat-header {
                padding: 10px 20px; /* mais compacto em landscape */
            }

            .chat-header h1 {
                font-size: 22px; /* menor para reduzir altura */
            }

            .chat-header p {
                font-size: 14px; /* menor para reduzir altura */
            }

            .chat-input-container {
                padding: 15px 20px 20px 20px;
            }

            .chat-input {
                padding: 14px 20px;
                font-size: 16px;
            }

            .send-button {
                padding: 14px 18px;
                font-size: 16px;
            }
        }

        /* Estilos para a seção de doações (fixa no rodapé) */
        /* Não reservar espaço físico no main; a tarja é overlay. */
        .donation-section {
            border-top: none;
            background: transparent; /* fundo só no container interno */
            text-align: center;
            position: relative; /* fluxo normal quando fechada */
            width: 100%; /* seguir a largura do .chat-container */
            height: var(--donation-bar-height);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-shadow: none; /* sombra aplicada no container interno */
            flex-shrink: 0; /* não encolher na coluna */
        }

        .donation-container {
            max-width: 100%; /* ocupar 100% da largura interna do .chat-container */
            width: 100%;
            margin: 0 auto; /* centralizar como os demais containers */
            background: #f0f0f0;
            border-radius: 0;
            padding: 6px 20px; /* padding lateral igual ao chat */
            box-shadow: none; /* remove linha sutil superior */
            border-top: none; /* remove borda superior */
            border-left: none;
            border-right: none;
            border-bottom: none;
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: center;
            flex-wrap: nowrap;
            font-size: calc(14px * var(--ui-scale));
        }

        /* Botão da tarja: menor e texto centralizado */
        .donate-button.btn {
            padding: 5px 8px !important;
            font-size: 0.85rem;
            line-height: 1.2;
            border-radius: 999px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }

        @media (max-width: 480px) {
            .donate-button.btn {
                font-size: 0.8rem;
                padding: 4px 8px !important;
            }
        }

        /* Estados da tarja de doação */
        /* Estado colapsado (tarja): título à esquerda e botão à direita */
        .donation-section:not(.open) .donation-content { display: none; }
        .donation-section:not(.open) .donation-highlight,
        .donation-section:not(.open) .pix-section,
        .donation-section:not(.open) .donation-footer { display: none; }
        .donation-section:not(.open) .donation-icon { display: none; }
        .donation-section .donation-header { order: 1; flex: 0 1 auto; margin: 0; padding: 0; }
        .donation-section .donation-header h3 {
            font-size: 16px; /* ligeiramente maior para melhor destaque */
            line-height: 24px;
            font-weight: 600;
            margin: 0;
            white-space: normal; /* permitir quebra no título da tarja */
            overflow: visible;
            text-overflow: unset;
            max-width: none; /* permite que o botão venha logo após o título */
            text-align: center;
        }

        /* Estado aberto (card ancorado): mostra conteúdo completo */
        .donation-section.open {
            position: fixed;
            inset: 0;
            left: 0;
            right: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 970; /* acima do input quando aberto */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5vh 5vw; /* cria margem respirável */
        }
        /* donation-container styles externalized to assets/css/site.css */
        .donation-section.open .donation-header,
        .donation-section.open .donation-content,
        .donation-section.open .donation-highlight,
        .donation-section.open .pix-section,
        .donation-section.open .donation-footer { 
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: center;
        }
        .donation-section.open .donation-header h3 { max-width: 100%; }
        .donation-section.open .donation-header { flex: 0 0 auto; }
        /* donation-content sizing moved to assets/css/site.css */
        .donation-section.open .donation-footer { flex: 0 0 auto; }
        .donation-section.open .donate-button { display: none; }

        /* Ajustes de tipografia no estado aberto para melhor uso do espaço */
        .donation-section.open .donation-header h3 {
            font-size: calc(1.2rem * var(--ui-scale));
            line-height: 1.3;
        }
        .donation-section.open .donation-text {
            font-size: calc(1rem * var(--ui-scale));
            line-height: 1.5;
        }
        .donation-section.open .pix-section {
            width: 100%;
            margin-bottom: 15px;
            text-align: center;
        }
        .donation-section.open .pix-section h4 {
            font-size: calc(1.1rem * var(--ui-scale));
            margin-bottom: 10px;
        }
        .donation-section.open .pix-email {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        .donation-section.open .pix-email code {
            font-size: calc(1rem * var(--ui-scale));
        }
        .donation-section.open .copy-btn {
            font-size: calc(0.9rem * var(--ui-scale));
            padding: 8px 12px;
        }
        .donation-section.open .pix-note {
            font-size: calc(1.4rem * var(--ui-scale));
        }

        .donate-button {
            height: calc(36px * var(--ui-scale)); /* um pouco mais alto */
            padding: calc(8px * var(--ui-scale)) calc(14px * var(--ui-scale)); /* maior para conforto */
            margin: calc(2px * var(--ui-scale)) 0 calc(2px * var(--ui-scale)) calc(12px * var(--ui-scale)); /* espaço entre título e botão */
            font-size: calc(13px * var(--ui-scale)); /* ligeiramente maior */
            line-height: calc(22px * var(--ui-scale));
            border-radius: calc(14px * var(--ui-scale));
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: #fff;
            border: none;
            cursor: pointer;
            font-weight: 600;
            order: 2;
            flex: 0 0 auto;
        }
        .donate-button:hover { opacity: 0.95; }

        /* Botão de fechar do modal de doações */
        .donation-close {
            position: absolute;
            top: 10px;
            right: 10px;
            border: none;
            background: #e9ecef;
            color: #333;
            border-radius: 6px;
            padding: 6px 10px;
            font-weight: 600;
            cursor: pointer;
            display: none; /* visível apenas quando aberto */
        }
        .donation-section.open .donation-close { display: inline-block; }

        .qr-code-section {
            text-align: center;
            margin: 10px auto 20px auto;
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 8px;
            border: none; /* remove borda do container de QR */
            width: 100%;
            max-width: 250px;
        }

        .qr-code-image {
            max-width: 180px;
            width: 100%;
            height: auto;
            border-radius: 6px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
            border: 2px solid #6f42c1;
            transition: transform 0.3s ease;
        }

        .qr-code-image:hover {
            transform: scale(1.05);
        }

        .donation-header {
            margin-bottom: calc(12px * var(--ui-scale)); /* menor */
        }

        .donation-header h3 {
            color: #6f42c1;
            margin: 0 0 calc(6px * var(--ui-scale)) 0; /* menor */
            font-size: calc(0.8em * var(--ui-scale)); /* ~40% menor */
            font-weight: 600;
        }

        .donation-icon {
            font-size: calc(1em * var(--ui-scale)); /* menor */
            margin: calc(6px * var(--ui-scale)) 0; /* menor */
        }

        .donation-text {
            color: #495057;
            line-height: 1.4; /* menor */
            margin-bottom: calc(10px * var(--ui-scale)); /* menor */
            font-size: calc(0.75em * var(--ui-scale)); /* menor */
        }

        .donation-highlight {
            background: #f8f9fa;
            border-left: 2px solid #6f42c1; /* menor */
            padding: calc(8px * var(--ui-scale)); /* menor */
            margin: calc(10px * var(--ui-scale)) 0; /* menor */
            border-radius: calc(3px * var(--ui-scale)); /* menor */
            text-align: left;
        }

        .donation-highlight p {
            margin: 0 0 calc(6px * var(--ui-scale)) 0; /* menor */
            color: #6f42c1;
            font-weight: 600;
            font-size: calc(0.85em * var(--ui-scale)); /* menor */
        }

        .donation-highlight ul {
            margin: 0;
            padding-left: calc(10px * var(--ui-scale)); /* menor */
            color: #495057;
        }

        .donation-highlight li {
            margin: calc(3px * var(--ui-scale)) 0; /* menor */
            font-size: calc(0.85em * var(--ui-scale)); /* menor */
        }

        .pix-section {
            background: #e7f3ff;
            border: 1px solid #0066cc; /* menor */
            border-radius: calc(6px * var(--ui-scale)); /* menor */
            padding: calc(10px * var(--ui-scale)); /* menor */
            margin: calc(12px * var(--ui-scale)) 0; /* menor */
        }

        .pix-section h4 {
            color: #0066cc;
            margin: 0 0 calc(8px * var(--ui-scale)) 0; /* menor */
            font-size: calc(0.8em * var(--ui-scale)); /* menor */
        }

        .pix-info {
            margin: calc(15px * var(--ui-scale)) 0;
        }

        .pix-label {
            display: block;
            color: #495057;
            font-weight: 600;
            margin-bottom: calc(8px * var(--ui-scale));
        }

        .pix-email {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: calc(10px * var(--ui-scale));
            flex-wrap: wrap;
        }

        .pix-email code {
            background: white;
            color: #0066cc;
            padding: calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale)); /* menor */
            border-radius: calc(5px * var(--ui-scale)); /* menor */
            font-size: calc(0.75em * var(--ui-scale)); /* menor */
            font-weight: 600;
            border: 1px solid #0066cc; /* menor */
            word-break: break-all;
        }

        .copy-btn {
            background: #0066cc;
            color: white;
            border: none;
            padding: calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale)); /* menor */
            border-radius: calc(4px * var(--ui-scale)); /* menor */
            cursor: pointer;
            font-size: calc(0.75em * var(--ui-scale)); /* menor */
            transition: all 0.3s ease;
        }

        .copy-btn:hover {
            background: #0052a3;
            transform: scale(1.05);
        }

        .pix-note {
            color: #0066cc;
            font-style: italic;
            margin: calc(8px * var(--ui-scale)) 0 0 0; /* menor */
            font-size: calc(0.75em * var(--ui-scale)); /* menor */
        }

        .donation-footer {
            margin-top: calc(12px * var(--ui-scale)); /* menor */
            padding-top: calc(10px * var(--ui-scale)); /* menor */
            border-top: 1px solid #e9ecef; /* menor */
            color: #6f42c1;
        }

        .donation-footer strong {
            color: #6f42c1;
            font-size: calc(0.8em * var(--ui-scale)); /* menor */
        }

        .donation-footer small {
            color: #6c757d;
            font-size: calc(0.7em * var(--ui-scale)); /* menor */
        }

        .responsible-person {
            margin-top: calc(12px * var(--ui-scale)); /* menor */
            padding-top: calc(8px * var(--ui-scale)); /* menor */
            border-top: 1px solid #e9ecef;
        }

        .person-name {
            color: #6f42c1;
            font-weight: 600;
            font-size: calc(0.85em * var(--ui-scale)); /* menor */
        }

        /* Responsividade para doações */
        @media (max-width: 768px) {
            .donation-section {
                padding: 8px 6px; /* menor */
            }

            .donation-container {
                padding: 8px 16px; /* padding lateral consistente */
                margin: 0;
                border-radius: 6px; /* menor */
            }

            .donation-header h3 {
                font-size: 0.8em; /* menor */
                line-height: 1.2; /* menor */
            }

            .donation-text {
                font-size: 0.7em; /* menor */
                line-height: 1.4; /* menor */
            }

            .donation-highlight {
                padding: 8px; /* menor */
                margin: 10px 0; /* menor */
            }

            .donation-highlight ul {
                padding-left: 10px; /* menor */
            }

            .donation-highlight li {
                font-size: 0.75em; /* menor */
                margin: 2px 0; /* menor */
            }

            .pix-section {
                padding: 10px; /* menor */
                margin: 12px 0; /* menor */
            }

            .pix-section h4 {
                font-size: 0.8em; /* menor */
                margin-bottom: 8px; /* menor */
            }

            .pix-email {
                flex-direction: column;
                gap: 6px; /* menor */
            }

            .pix-email code {
                font-size: 0.7em; /* menor */
                padding: 5px 8px; /* menor */
                word-break: break-all;
            }

            .copy-btn {
                padding: 6px 10px; /* menor */
                font-size: 0.7em; /* menor */
            }

            .qr-code-section {
                padding: 8px; /* menor */
                margin-bottom: 8px; /* menor */
            }

            .qr-code-image {
                max-width: 100px; /* menor */
            }

            .pix-note {
                font-size: 0.7em; /* menor */
                margin: 8px 0 0 0; /* menor */
            }

            .donation-footer {
                margin-top: 10px; /* menor */
                padding-top: 8px; /* menor */
            }

            .donation-footer strong {
                font-size: 0.75em; /* menor */
            }

            .donation-footer small {
                font-size: 0.65em; /* menor */
                line-height: 1.3; /* menor */
            }
        }

        @media (max-width: 480px) {
            .donation-section {
                padding: 10px 5px;
            }

            .donation-container {
                padding: 6px 12px; /* padding lateral consistente */
                border-radius: 6px; /* menor */
            }

            .donation-header h3 {
                font-size: 0.75em; /* menor */
                line-height: 1.1; /* menor */
            }

            .donation-icon {
                font-size: 0.9em; /* menor */
                margin: 6px 0; /* menor */
            }

            .donation-text {
                font-size: 0.7em; /* menor */
            }

            .qr-code-image {
                max-width: 90px; /* menor */
            }

            .pix-section {
                padding: 8px; /* menor */
            }

            .pix-section h4 {
                font-size: 0.75em; /* menor */
            }

            .pix-email code {
                font-size: 0.65em; /* menor */
                padding: 4px 8px; /* menor */
            }

            .copy-btn {
                padding: 5px 10px; /* menor */
                font-size: 0.65em; /* menor */
            }
        }

        @media (max-width: 360px) {
            .donation-container {
                padding: 6px 10px; /* padding lateral consistente */
            }

            .qr-code-image {
                max-width: 80px; /* menor */
            }

            .donation-header h3 {
                font-size: 0.7em; /* menor */
            }

            .donation-text {
                font-size: 0.6em; /* menor */
            }

            .pix-email code {
                font-size: 0.6em; /* menor */
                padding: 4px 6px; /* menor */
            }
        }

        /* Estilos para a apresentação do Miguel */
        .miguel-intro {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-left: 2px solid #6f42c1; /* ~20% menor */
            padding: 10px; /* ~20% menor */
            margin-bottom: 12px; /* ~20% menor */
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* sombra levemente menor */
            width: 100%;
        }

        .miguel-intro h2 {
            color: #6f42c1;
            margin: 0 0 8px 0; /* ~20% menor */
            font-size: clamp(1rem, 3.6vw, 1.35rem); /* reduz em telas pequenas, confortável em desktop */
            font-weight: 600;
        }

        .miguel-intro p {
            margin: 0 0 6px 0; /* ~20% menor */
            line-height: 1.4; /* ~20% menor */
            font-size: clamp(0.9rem, 2.8vw, 1.05rem);
            color: #495057;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .miguel-intro p:last-child {
            margin-bottom: 0;
        }

        /* Bloco colapsável da introdução */
        .intro-details {
            margin-top: 8px;
        }
        .intro-details summary {
            /* Não é mais clicável/visível: remover interatividade e esconder */
            display: none;
        }
        .intro-details summary::marker { display: none; }
        .intro-details[open] summary { color: #5a36a8; }
        .intro-highlights {
            margin: 10px 0 0;
            padding: 0;
            color: #495057;
            text-align: center;
            list-style: none;
        }
        .intro-highlights li {
            margin: 6px 0;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .intro-highlights li::before {
            content: "•";
            color: #6f42c1;
            margin-right: 8px;
        }
        .intro-caption {
            color: #6c757d;
            font-size: 0.95em;
            margin: 12px 0 8px;
            text-align: center;
        }
        .disclaimer {
            color: #6c757d;
            font-size: 0.85em;
            margin-top: 8px;
            text-align: center;
        }

        /* Estilos para os cards de exemplo */
        .example-questions {
            margin: 6px 0 16px; /* mais compacto */
        }

        .example-questions h3,
        .example-questions h4 {
            color: #495057;
            margin: 0 0 12px 0; /* menor */
            font-size: 1.05em; /* menor */
            text-align: center;
        }

        .question-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 0; /* usar gutters do Bootstrap (g-*) */
            margin-bottom: 12px; /* ~20% menor */
            justify-content: center;
            align-items: stretch;
        }

        .question-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            /* Não definir flex/max-width aqui para não conflitar com .row/.col do Bootstrap */
        }

        .question-card:hover {
            border-color: #6f42c1;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(111, 66, 193, 0.15);
        }

        .card-icon {
            font-size: 1.5em; /* ligeiramente maior */
            margin-bottom: 6px; /* ~20% menor */
        }

        .card-title {
            font-weight: 700; /* negrito */
            color: #6f42c1;
            margin-bottom: 5px; /* ~20% menor */
            font-size: 0.86em; /* um pouco maior */
        }

        .card-example {
            color: #6c757d;
            font-size: 0.86em; /* um pouco maior */
            font-weight: 700; /* negrito */
            font-style: normal; /* remover itálico para negrito claro */
            line-height: 1.4; /* ligeiramente maior para leitura */
        }

        /* Responsividade para cards */
        @media (max-width: 768px) {
            .question-cards {
                justify-content: center;
                gap: 0; /* gerir espaçamentos via g-* do Bootstrap */
            }
            
            .question-card {
                padding: 8px;
            }
            
            .card-icon {
                font-size: 1.8em; /* um pouco maior no mobile */
            }
        }

        @media (max-width: 480px) {
            .question-cards {
                justify-content: center;
                gap: 0; /* gerir espaçamentos via g-* do Bootstrap */
            }
            
            .question-card {
                padding: 8px; /* menor em telas pequenas */
            }
            
            .miguel-intro {
                padding: 15px;
                text-align: center; /* centralizar conteúdo em telas pequenas */
            }
            
            .miguel-intro h2 {
                font-size: 1.2em;
            }
        }

        /* Aumentar levemente em telas grandes */
        @media (min-width: 992px) {
            .question-card {
                padding: 14px; /* mais confortável em desktop */
            }
            .card-icon {
                font-size: 2em;
            }
            .card-title {
                font-size: 0.95em;
            }
            .card-example {
                font-size: 0.9em;
            }
        }

        /* Seletor de modo (Criança/Adulto) */
        .mode-selector {
            display: flex;
            gap: calc(8px * var(--ui-scale)); /* menos espaço entre botões */
            margin-top: 0; /* remove espaço acima para compactar o cabeçalho */
            justify-content: flex-end; /* alinhar à direita do cabeçalho */
            align-items: center;
            flex-wrap: wrap;
            grid-column: 2;
            grid-row: 2; /* controles na segunda linha */
        }
        .mode-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)); /* padding padronizado */
            border-radius: 8px; /* border-radius consistente */
            border: 1px solid rgba(255,255,255,0.2); /* borda consistente */
            background: rgba(255,255,255,0.15);
            color: #fff;
            cursor: pointer;
            font-size: calc(14px * var(--ui-scale)); /* fonte padronizada */
            font-weight: 600;
            transition: transform 0.2s ease, background 0.2s ease;
            white-space: nowrap; /* evitar quebra de linha */
            text-align: center;
            height: 36px; /* altura fixa para consistência */
            box-sizing: border-box;
        }
        .mode-button:hover { transform: translateY(-1px); background: rgba(255,255,255,0.25); }
        .mode-button.active { background: rgba(255,255,255,0.35); border-color: #fff; }
        .mode-button .icon { font-size: 20px; }
        /* Ícones maiores visualmente sem alterar a altura do botão */
        .mode-button .icon img.mode-icon {
            width: 24px; /* base de layout */
            height: 24px; /* mantém altura do botão estável */
            display: inline-block;
            object-fit: contain;
            transform: scale(1.35); /* aumenta visualmente ~35% sem afetar layout */
            transform-origin: center;
        }
        .hidden { display: none !important; }

        /* Tema infantil */
        .child-mode .chat-header { background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%); }
        .child-mode .chat-header h1 { font-family: 'Comic Sans MS', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .child-mode .chat-header p { font-size: 22px; }
        .child-mode .work-button { background: linear-gradient(135deg, #ff9aa2 0%, #ff6f91 100%); }
        .child-mode .message.bot .message-content { border-color: #ffc1cf; }
        .child-mode .question-card { background: #fff7e6; border: 2px dashed #ffa3b1; }
        .child-mode .question-card .card-title { color: #ff6f91; }
        /* Ocultar seleção de obras e indicador no modo criança */
        .child-mode .work-selection-buttons,
        .child-mode #selectedWorkIndicator,
        .child-mode .intro-details,
        .child-mode .instruction-text { display: none !important; }
        /* Doação: mostrar apenas título e botão até abrir */
        .donation-section .donation-content { display: none; }
        .donation-section.open .donation-content { display: block; }
        .donate-button {
            display: inline-block;
            margin: 2px 0 2px 12px; /* espaço entre título e botão */
            padding: 8px 14px; /* maior para conforto */
            height: 36px; /* um pouco mais alto */
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: #fff;
            font-size: 13px; /* ligeiramente maior */
            line-height: 22px;
            font-weight: 600;
            cursor: pointer;
        }
        .donate-button:hover { background: #3e8e41; }
        /* No modo criança, garantir que somente o container interno tenha fundo */
        .child-mode .donation-section { background: transparent !important; border-top: none !important; }
        .child-mode .donation-container { background: #ffffff !important; }

        /* Estilos para o seletor de modo e idioma */
        .mode-selector {
            display: flex;
            gap: calc(8px * var(--ui-scale));
            flex-grow: 1;
            justify-content: flex-start;
        }
        
        .mode-button {
            background-color: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255,255,255,0.25);
            color: white;
            padding: calc(8px * var(--ui-scale)) calc(14px * var(--ui-scale));
            border-radius: 8px;
            cursor: pointer;
            font-size: calc(14px * var(--ui-scale));
            display: flex;
            align-items: center;
            gap: calc(6px * var(--ui-scale));
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .mode-button:hover {
            background-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .mode-button.active {
            background-color: rgba(255, 255, 255, 0.35);
            border-color: #ffffff;
            border-width: 2px;
            font-weight: 700;
            outline: 2px solid rgba(255,255,255,0.6);
            outline-offset: 2px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .mode-button.active::after {
            content: "✓";
            margin-left: 6px;
            font-weight: 800;
        }
        
        .lang-switcher {
            position: relative;
            z-index: 2;
            display: block;
        }
        
        .lang-switcher select {
            background-color: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)); /* padding padronizado */
            border-radius: 8px; /* border-radius consistente */
            cursor: pointer;
            font-size: calc(14px * var(--ui-scale)); /* fonte padronizada */
            font-weight: 600; /* peso da fonte consistente */
            min-width: 120px;
            height: 36px; /* altura fixa para consistência */
            box-sizing: border-box;
            transition: all 0.2s ease;
            display: block;
            width: 100%;
        }

        /* Garante visibilidade dos itens do dropdown nativo */
        .lang-switcher option {
            color: #111 !important;
            background-color: #ffffff !important;
        }
        .lang-switcher option:checked {
            background-color: #e6e6e6 !important;
            color: #111 !important;
        }
        
        .lang-switcher select:hover {
            background-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        @media (max-width: 768px) {
            .header-controls {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .lang-switcher {
                width: 100%;
                display: flex;
                justify-content: center;
            }
        }
/* ---------- Modern toast notifications ---------- */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon { font-weight: 700; font-size: 18px; }
.toast-content strong { display: block; font-weight: 700; margin-bottom: 4px; }
.toast-success { border-left: 4px solid #4CAF50; }
.toast-error { border-left: 4px solid #FF5252; }
.toast-info { border-left: 4px solid #3F51B5; }

/* ---------- Minimal modal for confirmation ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}
.modal-card {
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.3);
  padding: 20px 22px;
  border: 1px solid rgba(0,0,0,0.06);
}
.modal-card h3 { margin-bottom: 8px; font-size: 18px; }
.modal-card p { margin-bottom: 16px; color: #444; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.btn { 
  appearance: none; border: none; cursor: pointer; 
  border-radius: 10px; padding: 10px 14px; font-weight: 600; 
}
.btn-primary { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: #f1f3f5; color: #333; }
.btn-secondary:hover { filter: brightness(0.98); }

/* ---------- Message actions and report button ---------- */
.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}
.report-button {
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  color: #333;
  cursor: pointer;
}
.report-button:hover {
  background: #eee;
}