.front-history-page{
    min-height:100vh;
    padding:28px;
    background:#020617;
    color:#e5e7eb;
}

.front-history-hero{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    background:linear-gradient(135deg,#111827,#1d4ed8);
    border-radius:28px;
    padding:26px;
    margin-bottom:22px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.front-history-hero span{
    color:#bfdbfe;
    font-weight:800;
}

.front-history-hero h1{
    margin:4px 0;
    font-size:32px;
}

.front-history-hero p{
    margin:0;
    color:#dbeafe;
}

.front-history-back,
.front-history-empty a{
    color:#fff;
    background:#2563eb;
    text-decoration:none;
    border-radius:14px;
    padding:12px 16px;
    font-weight:800;
}

.front-history-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
}

.front-history-card{
    display:flex;
    justify-content:space-between;
    gap:14px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    color:#e5e7eb;
    text-decoration:none;
    border-radius:22px;
    padding:18px;
    transition:.2s;
}

.front-history-card:hover{
    transform:translateY(-2px);
    border-color:#60a5fa;
}

.front-history-card strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
}

.front-history-card span,
.front-history-card small{
    color:#94a3b8;
}

.front-history-empty{
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:24px;
    text-align:center;
}

.front-history-chat{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:900px;
    margin:0 auto;
}

.front-history-message{
    border-radius:18px;
    padding:14px 16px;
    max-width:78%;
}

.front-history-message.user{
    align-self:flex-end;
    background:#2563eb;
    color:#fff;
}

.front-history-message.assistant{
    align-self:flex-start;
    background:#1f2937;
    color:#e5e7eb;
}

.front-history-message p{
    margin:6px 0;
}

.front-history-message small{
    opacity:.72;
}

@media(max-width:720px){
    .front-history-page{
        padding:14px;
    }

    .front-history-hero{
        flex-direction:column;
        align-items:flex-start;
    }

    .front-history-message{
        max-width:94%;
    }
}


.btn-history-chat{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 16px;
    border-radius:8px;
    font-weight:800;
    text-decoration:none;
}

.chat-panel .input-group .btn-history-chat{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left:0;
}

.messages,
.chat-messages{
    overflow-y:auto;
    overflow-x:hidden;
}


/* Chat compartilhado do front: usado em /{slug} e /{slug}/historico */
.front-chat-shell {
    width: 100%;
}

.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.chat-toolbar strong {
    display: block;
    color: #fff;
    font-weight: 900;
}

.chat-toolbar small {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: .82rem;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 16px;
    min-height: 520px;
    align-items: stretch;
}

.glass {
    background: rgba(15,23,42,.76);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    box-shadow: 0 20px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.avatar-panel {
    min-height: 520px;
    height: 100%;
    padding: 14px;
    box-sizing: border-box;
}

.avatar-frame {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}

.chat-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.chat-panel .messages {
    flex: 1;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-panel .message {
    max-width: 78%;
    border-radius: 16px;
    padding: 12px 15px;
    line-height: 1.35;
    word-break: break-word;
}

.chat-panel .message.ai {
    align-self: flex-start;
    background: #1f2937;
    color: #f8fafc;
}

.chat-panel .message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #0d6efd, #00a3ff);
    color: #fff;
}

.btn-history-chat {
    border: 0;
    background: #1e293b;
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

.btn-history-chat:hover {
    background: #334155;
    color: #fff;
}

.front-history-drawer {
    position: absolute;
    top: 62px;
    right: 14px;
    bottom: 86px;
    z-index: 30;
    width: min(390px, calc(100% - 28px));
    display: none;
    flex-direction: column;
    border-radius: 18px;
    background: rgba(2,6,23,.96);
    border: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 28px 90px rgba(0,0,0,.48);
    overflow: hidden;
}

.front-history-drawer.is-open {
    display: flex;
}

.front-history-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
}

.front-history-drawer-header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.front-history-async-list {
    padding: 12px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.front-history-loading,
.front-history-async-empty,
.front-history-async-error {
    color: rgba(255,255,255,.72);
    padding: 16px;
    text-align: center;
}

.front-history-async-card {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(15,23,42,.88);
    color: #e5e7eb;
    border-radius: 16px;
    padding: 13px;
    cursor: pointer;
    transition: .18s;
}

.front-history-async-card:hover,
.front-history-async-card.active {
    border-color: #38bdf8;
    background: rgba(30,41,59,.96);
    transform: translateY(-1px);
}

.front-history-async-card strong {
    display: block;
    color: #fff;
    margin-bottom: 6px;
}

.front-history-async-card small {
    color: #94a3b8;
}

@media(max-width: 900px) {
    .chat-layout {
        grid-template-columns: 1fr;
    }

    .avatar-panel {
        min-height: 300px;
    }

    .avatar-frame {
        min-height: 280px;
    }

    .unity-avatar-container {
        min-height: 280px;
    }

    .unity-avatar-canvas {
        min-height: 280px;
    }
}

@media(max-width: 640px) {
    .avatar-panel {
        min-height: 230px;
        padding: 10px;
    }

    .unity-avatar-container {
        min-height: 210px;
        border-radius: 14px;
    }

    .unity-avatar-canvas {
        min-height: 210px;
    }

    .chat-panel .message {
        max-width: 94%;
    }

    .chat-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-history-chat {
        width: 100%;
    }

    .front-history-drawer {
        left: 10px;
        right: 10px;
        width: auto;
    }
}

/* Mantém o HTML vindo do Marten com o visual original da bolha do chat */
.message p,
.front-history-message p{
    margin:0;
    padding:0;
    display:inline;
}

.message p + p,
.front-history-message p + p{
    display:block;
    margin-top:4px;
}

.message ul,
.message ol,
.front-history-message ul,
.front-history-message ol{
    margin:6px 0 0 18px;
    padding:0;
}

.message a,
.front-history-message a{
    color:inherit;
    text-decoration:underline;
}

.message-html-content{
    display:contents;
}

/* Ajuste visual do histórico: mantém cores originais e hora discreta com respiro */
.chat-panel .message.user,
.messages .message.user,
.front-history-message.user{
    align-self:flex-end;
    background:linear-gradient(135deg, #0d6efd, #00a3ff);
    color:#fff;
}

.chat-panel .message.ai,
.messages .message.ai,
.front-history-message.assistant{
    align-self:flex-start;
    background:#1f2937;
    color:#f8fafc;
}

/* Hora inline sem destaque azul */
.message-time{
    display:inline-block;
    margin-left:6px;
    font-size:10px;
    line-height:1;
    opacity:.72;
    font-weight:600;
    letter-spacing:0;
    vertical-align:middle;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    padding:0 !important;
    filter:none !important;
    color:rgba(255,255,255,.72);
}

.message.user .message-time,
.front-history-message.user .message-time{
    color:rgba(255,255,255,.78);
}

.message.ai .message-time,
.front-history-message.assistant .message-time{
    color:rgba(255,255,255,.65);
}


/* Unity WebGL carregado direto no HTML, sem iframe */
.unity-avatar-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: clamp(240px, 45vh, 500px);
    overflow: hidden;
    border-radius: 18px;
    background: #0b1020;
}

.unity-avatar-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit;
    background: #0b1020;
    outline: none;
}

.chat-panel {
    position: relative;
    z-index: 10;
}

.chat-panel input,
.chat-panel textarea,
.chat-panel button,
.chat-panel select {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.unity-avatar-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(320px, 76%);
    min-height: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.18);
}

.unity-avatar-progress {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: #fff;
}

.unity-avatar-warning {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 4;
    max-width: calc(100% - 28px);
    transform: translateX(-50%);
    color: white;
    font: 600 13px/1.4 Arial, sans-serif;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.unity-avatar-warning.is-error {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(220,38,38,.92);
}


/* Correção: Unity WebGL não pode bloquear digitação no chat */
.chat-layout,
.chat-panel {
    isolation: isolate;
}

.chat-panel {
    position: relative;
    z-index: 100;
}

.chat-panel .p-3,
.chat-panel .input-group,
#messageInput,
#chatInput,
#sendBtn,
#chatSendButton {
    position: relative;
    z-index: 120;
    pointer-events: auto !important;
}

#messageInput,
#chatInput {
    user-select: text;
    -webkit-user-select: text;
    touch-action: manipulation;
}

.avatar-panel {
    position: relative;
    z-index: 1;
}


/* Garante que o Avatar WebGL não sobreponha nem capture os controles do chat */
.front-chat-shell .avatar-panel{
    position:relative;
    z-index:1;
    overflow:hidden;
}

.front-chat-shell .chat-panel{
    position:relative;
    z-index:50;
    isolation:isolate;
}

.front-chat-shell .chat-panel .p-3,
.front-chat-shell .chat-panel .input-group,
.front-chat-shell #messageInput,
.front-chat-shell #sendBtn{
    position:relative;
    z-index:80;
    pointer-events:auto;
}

.front-chat-shell .unity-avatar-canvas{
    touch-action:manipulation;
}

/* Correção definitiva: o canvas do Unity deve apenas renderizar o avatar no front chat.
   Não pode capturar clique/foco/teclado do campo de mensagem. */
.front-chat-shell .unity-avatar-container,
.front-chat-shell .unity-avatar-canvas {
    pointer-events: none !important;
}

.front-chat-shell .chat-panel,
.front-chat-shell .chat-panel * {
    pointer-events: auto;
}


/* Tema dinâmico da empresa no histórico/chat público */
.front-chat-shell .ct-product-interest,
.front-chat-shell .ct-product-interest-btn,
.front-chat-shell .ct-human-button {
    background: var(--chat-company-color, #2563eb);
    color: #fff;
}

.front-chat-shell .ct-product-details-btn {
    background: color-mix(in srgb, var(--chat-company-color, #3730a3) 12%, #ffffff);
    color: color-mix(in srgb, var(--chat-company-color, #3730a3) 74%, #1e1b4b);
}

.chat-panel .message{display:flex;align-items:flex-start;gap:8px;}
.chat-panel .message.product-list-message{display:block;max-width:min(920px,100%);}
.chat-panel .message .message-icon{font-size:18px;line-height:1.25;opacity:.84;flex:0 0 auto;}
.chat-panel .message .message-copy{min-width:0;}


/* Avatar WebGL responsivo no front: mantém proporção, não estoura o chat e acompanha telas menores */
.front-chat-shell .avatar-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.front-chat-shell .avatar-frame,
.front-chat-shell .unity-avatar-container {
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
    height: auto !important;
    min-height: clamp(220px, 44vh, 520px);
    max-height: min(620px, calc(100vh - 190px));
}

.front-chat-shell .unity-avatar-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain;
}

@media (max-width: 900px) {
    .front-chat-shell .avatar-frame,
    .front-chat-shell .unity-avatar-container {
        aspect-ratio: 16 / 10;
        min-height: clamp(220px, 38vh, 360px);
        max-height: 380px;
    }
}

@media (max-width: 640px) {
    .front-chat-shell .avatar-panel {
        padding: 10px;
    }

    .front-chat-shell .avatar-frame,
    .front-chat-shell .unity-avatar-container {
        aspect-ratio: 16 / 9;
        min-height: clamp(180px, 34vh, 260px);
        max-height: 280px;
        border-radius: 16px;
    }
}

/* Avatar front totalmente responsivo, sem largura/altura fixa */
.front-chat-shell .chat-layout {
    grid-template-columns: minmax(0, clamp(240px, 34vw, 520px)) minmax(0, 1fr);
    align-items: stretch;
}

.front-chat-shell .avatar-panel {
    min-height: clamp(280px, 62vh, 760px);
    height: auto;
    display: flex;
    padding: clamp(8px, 1.4vw, 14px);
}

.front-chat-shell .avatar-frame,
.front-chat-shell .unity-avatar-container {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 9 / 14;
    flex: 1 1 auto;
}

.front-chat-shell .unity-avatar-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block;
}

@media(max-width: 900px) {
    .front-chat-shell .chat-layout {
        grid-template-columns: 1fr;
    }

    .front-chat-shell .avatar-panel {
        min-height: 0;
    }

    .front-chat-shell .avatar-frame,
    .front-chat-shell .unity-avatar-container {
        aspect-ratio: 16 / 10;
    }
}

@media(max-width: 640px) {
    .front-chat-shell .avatar-frame,
    .front-chat-shell .unity-avatar-container {
        aspect-ratio: 1 / 1;
    }
}


/* Histórico do front: lista completa com rolagem estilizada */
.front-history-drawer-card{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
}

.front-history-async-list{
    flex:1 1 auto;
    min-height:0;
    max-height:calc(100vh - 220px);
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color: color-mix(in srgb, var(--chat-company-color, #38bdf8) 70%, #64748b) rgba(15,23,42,.58);
}

.front-history-async-list::-webkit-scrollbar{
    width:10px;
}

.front-history-async-list::-webkit-scrollbar-track{
    background:rgba(15,23,42,.58);
    border-radius:999px;
}

.front-history-async-list::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--chat-company-color, #38bdf8), rgba(148,163,184,.72));
    border:2px solid rgba(15,23,42,.86);
    border-radius:999px;
}

.front-history-async-list::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, color-mix(in srgb, var(--chat-company-color, #38bdf8) 80%, #fff), rgba(203,213,225,.84));
}

.front-history-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

/* Overlay do histórico: precisa ficar acima do avatar, canvas e qualquer camada do chat. */
body.front-history-modal-open{
    overflow:hidden;
}

body .front-history-drawer{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    display:none;
    padding:clamp(16px, 4vw, 42px);
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:none;
}

body .front-history-drawer.is-open{
    display:flex !important;
    align-items:stretch;
    justify-content:flex-end;
    pointer-events:auto;
}

body .front-history-drawer-backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(8px);
}

body .front-history-drawer-card{
    position:relative;
    z-index:1;
    width:min(430px, calc(100vw - 32px));
    height:min(760px, calc(100vh - 32px));
    max-height:calc(100vh - 32px);
    align-self:center;
    border-radius:18px;
    background:rgba(2,6,23,.98);
    border:1px solid rgba(148,163,184,.26);
    box-shadow:0 32px 120px rgba(0,0,0,.62);
    overflow:hidden;
}

@media(max-width:640px){
    body .front-history-drawer{
        padding:12px;
        align-items:stretch;
    }

    body .front-history-drawer-card{
        width:100%;
        height:100%;
        max-height:none;
        border-radius:16px;
    }
}

.front-history-status{
    flex:0 0 auto;
    border-radius:999px;
    padding:3px 8px;
    font-size:10px;
    font-weight:900;
    color:#e5e7eb;
    background:rgba(148,163,184,.18);
}

.front-history-status.is-open{background:rgba(34,197,94,.18);color:#86efac;}
.front-history-status.is-waiting{background:rgba(251,191,36,.18);color:#fde68a;}
.front-history-status.is-progress{background:rgba(56,189,248,.18);color:#7dd3fc;}
.front-history-status.is-finished{background:rgba(148,163,184,.18);color:#cbd5e1;}