/* ============================================================
   LEO CHAT — assistente da home (Zip Lifestyle)
   Linguagem "Quiet Premium" (v7/v8): cinzas neutros, hairlines,
   sombras difusas, acento lime do Leo.
   - DESKTOP (>=769px): dock embutido na home, sempre aberto.
   - MOBILE (<=768px): launcher na home -> overlay fullscreen.
   Carrega DEPOIS do style.css, então pode refinar tokens existentes.
   ============================================================ */

:root {
    --leo-accent: #b3ff1a;
    --leo-accent-deep: #84cc16;
    --leo-ink: #0f172a;
    --leo-bubble-bg: #f2f2f4;
    --leo-bubble-fg: #1d1d1f;
    --leo-user-bg: #1d1d1f;
    --leo-user-fg: #ffffff;
    --leo-surface: var(--bg-card, #ffffff);
    --leo-hair: var(--border-color, rgba(15, 23, 42, 0.08));
    --leo-muted: var(--text-sec, #6e6e73);
}

body.dark-mode {
    --leo-ink: #050505;
    --leo-bubble-bg: rgba(255, 255, 255, 0.07);
    --leo-bubble-fg: #f5f5f7;
    --leo-user-bg: var(--leo-accent);
    --leo-user-fg: #0a0a0b;
    --leo-surface: var(--bg-card, #1a1a1c);
    --leo-hair: var(--border-color, rgba(255, 255, 255, 0.08));
}

/* ---------- Avatar / marca compartilhada ---------- */
.leo-mark {
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--leo-accent), var(--leo-accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.leo-mark > i,
.leo-mark > span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--leo-ink);
    color: var(--leo-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   #leoHome — vive dentro do #view-home
   ============================================================ */
.leo-home {
    margin: 4px 0 22px;
}

/* ---------- Dock embutido (chat inline já aberto — desktop E mobile) ---------- */
.leo-dock {
    display: flex;
    flex-direction: column;
    background: var(--leo-surface);
    border: 1px solid var(--leo-hair);
    border-radius: 24px;
    box-shadow: var(--shadow, 0 18px 40px rgba(15, 23, 42, 0.06));
    overflow: hidden;
    height: 460px;
    max-height: 60vh;
}

.leo-dock-head,
.leo-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--leo-hair);
}
.leo-dock-head .leo-mark,
.leo-sheet-head .leo-mark {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
}
.leo-head-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.leo-head-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main, #1d1d1f);
    letter-spacing: -0.01em;
}
.leo-head-status {
    font-size: 0.76rem;
    color: var(--leo-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.leo-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: leoBlink 1.8s infinite ease-in-out;
}
@keyframes leoBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.leo-head-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--leo-muted);
    background: var(--leo-bubble-bg);
    padding: 5px 9px;
    border-radius: 999px;
}

/* ---------- Thread (lista de mensagens) ---------- */
.leo-thread {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.leo-thread::-webkit-scrollbar { width: 7px; }
.leo-thread::-webkit-scrollbar-thumb {
    background: var(--leo-hair);
    border-radius: 999px;
}

.leo-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
    animation: leoRowIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes leoRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.leo-row.user { flex-direction: row-reverse; }
.leo-row .leo-mark {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    margin-bottom: 2px;
}
.leo-row.user .leo-mark { display: none; }

.leo-row-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 80%;
    min-width: 0;
}
.leo-row.user .leo-row-body { align-items: flex-end; }

.leo-bubble {
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--leo-bubble-fg);
    background: var(--leo-bubble-bg);
    border-bottom-left-radius: 6px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.leo-bubble strong { font-weight: 700; }
.leo-bubble p { margin: 0; }
.leo-bubble p + p { margin-top: 7px; }
.leo-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.leo-bubble li { margin: 3px 0; }
.leo-row.user .leo-bubble {
    background: var(--leo-user-bg);
    color: var(--leo-user-fg);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 6px;
}

/* ---------- Ações (botões que executam algo) ---------- */
.leo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.leo-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--leo-hair);
    background: var(--leo-surface);
    color: var(--text-main, #1d1d1f);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.leo-act-btn:hover { transform: translateY(-1px); }
.leo-act-btn:active { transform: translateY(0); }
.leo-act-btn.primary {
    background: var(--leo-ink);
    color: #fff;
    border-color: var(--leo-ink);
}
body.dark-mode .leo-act-btn.primary {
    background: var(--leo-accent);
    color: #0a0a0b;
    border-color: var(--leo-accent);
}
.leo-act-btn.primary i { color: var(--leo-accent); }
body.dark-mode .leo-act-btn.primary i { color: #0a0a0b; }
.leo-act-btn[disabled] {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

/* ---------- Chips de sugestão (enviam um texto) ---------- */
.leo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.leo-chip {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--leo-hair);
    background: transparent;
    color: var(--text-main, #1d1d1f);
    transition: transform 0.15s ease, background 0.15s ease;
}
.leo-chip:hover {
    transform: translateY(-1px);
    background: var(--leo-bubble-bg);
}

/* ---------- Indicador de digitação ---------- */
.leo-typing {
    display: inline-flex;
    gap: 4px;
    padding: 13px 16px;
    background: var(--leo-bubble-bg);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
}
.leo-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--leo-muted);
    animation: leoTyping 1.2s infinite ease-in-out;
}
.leo-typing span:nth-child(2) { animation-delay: 0.18s; }
.leo-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes leoTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Composer (entrada de texto) ---------- */
.leo-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--leo-hair);
    background: var(--leo-surface);
}
.leo-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--leo-hair);
    background: var(--leo-bubble-bg);
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.92rem;
    color: var(--text-main, #1d1d1f);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.leo-input::placeholder { color: var(--leo-muted); }
.leo-input:focus { border-color: var(--leo-accent-deep); }
.leo-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--leo-ink);
    color: var(--leo-accent);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.leo-send:hover { transform: scale(1.06); }
.leo-send:active { transform: scale(0.96); }
body.dark-mode .leo-send { background: var(--leo-accent); color: #0a0a0b; }

/* ============================================================
   RESPONSIVIDADE — mesmo dock inline em desktop e mobile.
   No mobile, o chat já vem aberto (abaixo dos cards de ajuda) e a
   altura acompanha a viewport. Breakpoint do app: 768px.
   ============================================================ */
@media (min-width: 769px) {
    .leo-home { margin-top: 8px; }
}
@media (max-width: 768px) {
    .leo-dock {
        height: 70dvh;
        max-height: 540px;
        min-height: 420px;
        border-radius: 22px;
    }
    .leo-dock-head { padding: 14px 16px; }
    .leo-dock .leo-thread { padding: 16px 14px; }
}

/* Entrada orquestrada da home (v8-boot): o dock sobe junto com os
   cards de ajuda. v8Rise/--ease-out vêm do style.css (carregado antes). */
/* Leo é fixo no canto inferior; não deve participar da animação de entrada
   (senão "pula"/desloca ao voltar para o Início). */
body.v8-boot #view-home #leoHome { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .leo-row,
    .leo-typing span,
    .leo-online-dot { animation: none !important; transition: none !important; }
}