/* ==========================================================
   maikons.ai — widget de chat do portfólio
   Usa os tokens de css/style.css; tudo prefixado com .mai-
   ========================================================== */

.mai {
    --mai-amber: #9a6413;
    --mai-err:   #b3261e;
    font-family: 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] .mai {
    --mai-amber: #e0b252;
    --mai-err:   #ff8a7a;
}

.mai *, .mai *::before, .mai *::after { box-sizing: border-box; }
.mai [hidden] { display: none !important; }

.mai :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mai-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html.mai-lock, html.mai-lock body { overflow: hidden; }

/* ---------- A marca M/S ---------- */

.mai-ms { display: block; }
.mai-ms text { font-family: 'Archivo', 'Arial Black', sans-serif; }
.mai-ms .m   { fill: var(--ink); transition: fill .3s; }
.mai-ms .s   { fill: none; stroke: var(--accent); stroke-dasharray: 700; stroke-dashoffset: 0; transition: stroke .3s; }
.mai-ms .sq  { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.mai-ms .ping { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mai-ms .gm, .mai-ms .gs { transition: transform .4s ease; }

/* ocioso: o ■ emite um pulso */
.mai-ms[data-state="ocioso"] .ping { animation: mai-ping 2.6s ease-out infinite; }
/* buscando: as letras se afastam e o S se redesenha */
.mai-ms[data-state="buscando"] .gm { animation: mai-drift-m 1.6s ease-in-out infinite; }
.mai-ms[data-state="buscando"] .gs { animation: mai-drift-s 1.6s ease-in-out infinite; }
.mai-ms[data-state="buscando"] .s  { animation: mai-draw 2.2s ease-in-out infinite; }
/* respondendo: o ■ pisca como o cursor do hero */
.mai-ms[data-state="respondendo"] .sq { animation: mai-blink .9s steps(1) infinite; }
/* modo limitado: âmbar e parado */
.mai-ms[data-state="limitado"] .s  { stroke: var(--mai-amber); }
.mai-ms[data-state="limitado"] .sq { fill: var(--mai-amber); }

@keyframes mai-ping    { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes mai-drift-m { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -2px); } }
@keyframes mai-drift-s { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 2px); } }
@keyframes mai-draw    { 0% { stroke-dashoffset: 700; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -700; } }
@keyframes mai-blink   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Botão flutuante ---------- */

.mai-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--ink);
}

.mai-fab__hint {
    display: none;
    padding: 10px 14px;
    border: 1px solid var(--line);
    background: var(--paper2);
    color: var(--ink-soft);
    transition: border-color .2s ease, color .2s ease;
}

.mai-fab__mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--paper);
    transition: border-color .2s ease, background .2s ease;
}

.mai-fab:hover .mai-fab__mark { border-color: var(--accent); background: var(--accent-dim); }
.mai-fab:hover .mai-fab__hint,
.mai-fab:focus-visible .mai-fab__hint { display: block; border-color: var(--accent); color: var(--ink); }
.mai.is-open .mai-fab__hint { display: none; }

/* ---------- Convite ao entrar ---------- */

.mai-teaser {
    position: fixed;
    right: 24px;
    bottom: 104px;
    z-index: 119;
    width: min(330px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--paper);
    color: var(--ink-soft);
    animation: mai-rise .45s cubic-bezier(.22, 1, .36, 1);
}

.mai-teaser__who { color: var(--accent); padding-right: 40px; }

.mai-teaser__x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: color .2s ease;
}

.mai-teaser__x:hover { color: var(--ink); }

.mai-teaser__text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); cursor: pointer; }
.mai-teaser__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mai-teaser__chips .mai-chip { min-height: 36px; padding: 5px 10px; }

.mai-teaser__typing { display: none; gap: 5px; align-items: center; height: 22px; }
.mai-teaser__typing i { width: 7px; height: 7px; background: var(--accent); animation: mai-dot 1s ease-in-out infinite; }
.mai-teaser__typing i:nth-child(3) { animation-delay: .15s; }
.mai-teaser__typing i:nth-child(4) { animation-delay: .3s; }

.mai-teaser.is-typing .mai-teaser__typing { display: flex; }
.mai-teaser.is-typing .mai-teaser__text,
.mai-teaser.is-typing .mai-teaser__chips { display: none; }

.mai.has-teaser .mai-fab__mark { border-color: var(--accent); }

@keyframes mai-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mai-dot  { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- Painel ---------- */

.mai-panel {
    position: fixed;
    right: 24px;
    bottom: 104px;
    z-index: 121;
    width: min(400px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 184px));
    height: min(620px, calc(100dvh - 184px));
    min-height: 360px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
}

.mai-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.mai-head__av {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
}

.mai-head__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mai-head__name {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.mai-status { color: var(--muted); }

.mai-status::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    vertical-align: 1px;
    background: var(--accent);
}

.mai-status[data-state="limitado"]::before { background: var(--mai-amber); }

.mai-x {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1rem;
    transition: border-color .2s ease, background .2s ease;
}

.mai-x:hover { border-color: var(--accent); background: var(--accent-dim); }

/* ---------- Mensagens ---------- */

.mai-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 14px;
    background: var(--paper2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mai-msg {
    max-width: 88%;
    padding: 11px 13px;
    font-size: 0.92rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mai-msg--bot { align-self: flex-start; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); }
.mai-msg--me  { align-self: flex-end; background: var(--ink); color: var(--paper); white-space: pre-line; }

.mai-msg p + p,
.mai-msg p + ul, .mai-msg p + ol,
.mai-msg ul + p, .mai-msg ol + p { margin-top: 0.55em; }
.mai-msg ul { list-style: square; padding-left: 1.2em; }
.mai-msg ol { list-style: decimal; padding-left: 1.4em; }
.mai-msg li + li { margin-top: 0.2em; }
.mai-msg strong { color: var(--ink); font-weight: 600; }
.mai-msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.mai-src {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.62rem;
    color: var(--muted);
}

.mai-src a { color: var(--accent); text-decoration: none; }
.mai-src a:hover { text-decoration: underline; }

.mai-typing {
    align-self: flex-start;
    padding: 9px 12px;
    border: 1px dashed var(--line);
    color: var(--muted);
}

.mai-acts { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }

.mai-btn,
.mai-chip {
    min-height: 40px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}

.mai-btn:hover,
.mai-chip:hover { border-color: var(--accent); }

.mai-btn--pri { border-color: var(--accent); background: var(--accent-dim); }

.mai-chip:disabled { opacity: .5; cursor: default; }

/* ---------- Rodapé do painel ---------- */

.mai-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--line);
}

.mai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mai-panel:has(.mai-lead) .mai-chips { display: none; }
.mai-chips .mai-chip { min-height: 36px; padding: 5px 10px; }

.mai-form { display: flex; gap: 8px; }

.mai-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
}

.mai-input::placeholder { color: var(--muted); }

.mai-send {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper);
    font-size: 1.1rem;
}

.mai-send:disabled { opacity: .45; cursor: default; }

.mai-note {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 0.62rem;
}

.mai-note a { color: var(--accent); }

/* ---------- Formulário de lead ---------- */

.mai-lead {
    position: relative;
    align-self: stretch;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.mai-lead__title { color: var(--accent); }

.mai-lead label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}

.mai-lead input:not([type="checkbox"]),
.mai-lead textarea,
.mai-lead select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper2);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
}

.mai-lead textarea { resize: vertical; min-height: 84px; }

.mai-lead [aria-invalid="true"] { border-color: var(--mai-err); }

.mai-err { color: var(--mai-err); font-size: 0.75rem; }
.mai-err:empty { display: none; }

.mai-lead .mai-ck { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.mai-lead .mai-ck input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.mai-lead .mai-ck span:first-of-type { flex: 1; min-width: 0; }
.mai-lead .mai-ck .mai-err { flex-basis: 100%; }

.mai-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mai-lead__row { display: flex; gap: 8px; flex-wrap: wrap; }

.mai-lead__submit {
    flex: 1;
    min-height: 44px;
    padding: 0 16px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mai-lead__submit:disabled { opacity: .55; cursor: default; }

.mai-lead__cancel {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

.mai-lead__msg { color: var(--mai-err); font-size: 0.8rem; }
.mai-lead__msg:empty { display: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 720px) {
    .mai-fab__hint { display: none; }
    .mai-fab { right: 16px; bottom: 16px; }
    .mai-fab__mark { width: 60px; height: 60px; }
    .mai-teaser { right: 16px; bottom: 88px; }
    .mai-panel { right: 16px; bottom: 88px; height: min(620px, calc(100dvh - 168px)); }
}

@media (max-width: 559.98px) {
    .mai-panel {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
    }
    .mai.is-open .mai-fab { display: none; }
    .mai-msg { max-width: 92%; }
    /* uma faixa só de sugestões, com rolagem própria */
    .mai-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
    .mai-chips::-webkit-scrollbar { display: none; }
    .mai-chips .mai-chip { flex: none; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .mai *, .mai *::before, .mai *::after { animation: none !important; transition: none !important; }
}