/* ===========================================================
   GISELE CHAT — BRANCO + LINHA VINHO (2025) — v3 (composer fixo + scroll por trás)
   - Composer/menu fixos alinhados à coluna do chat (via --chat-left/right)
   - Timeline rola por trás do composer (sem padding extra)
   - Contatos independentes, sem sobrepor rodapé
   - Bolhas brancas; linha vinho 3D nos contatos
   - Datas/horários VERDE (contatos + conversa + chip)
   - Safe-area friendly (iOS/Android)
   - A11y e performance (contain + lazy areas)
=========================================================== */

/* ---------------- Tokens ---------------- */
:root {
    /* Layout */
    --layout-max: 1120px;
    --composer-max: 880px;
    --sidebar-w: 340px;
    /* Alturas controladas por JS */
    --gs-menu-h: 56px; /* footer/menu inferior (atualizado via JS) */
    --chat-input-h: 72px; /* altura do composer (atualizado via JS) */
    /* Cores */
    --ink: #0c1220;
    --ink-strong: #0a0f1f;
    --muted: #6b7a8c;
    --bg: #ffffff;
    --bg-alt: #f7f9fc;
    --chat-bg: #f2f3f5;
    --line: #e5e7eb;
    /* Linha vinho 3D */
    --divider-wine: #8B0A1A;
    --line-thick: 3px;
    --rise-w: 26px;
    --rise-h: 14px;
    /* Ações */
    --send: #1f2937;
    --send-hover: #111827;
    /* Sombras */
    --shadow-1: 0 1px 0 rgba(0,0,0,.03), 0 4px 14px rgba(16,24,40,.08);
    --shadow-2: 0 10px 30px rgba(16,24,40,.14);
    /* Bolhas */
    --bubble-bg: #ffffff;
    --bubble-border: #e5e7eb;
    /* Tipografia */
    --msg-size: clamp(16px,1.9vw,18px);
    --timestamp-size: .70em;
    /* Datas/horários (verde) */
    --date-green: #16a34a;
    --date-green-ink: #065f46;
    --date-green-bg: #ecfdf5;
    /* Alinhamento do composer / menu com a coluna do chat */
    --chat-left: 0px;
    --chat-right: 0px;
    /* limite máximo de “respiro” abaixo das mensagens */
    --bottom-floor-max: 112px; /* ajuste: 96px, 112px, 128px... */
    /* se quiser também um mínimo “bonito” */
    --bottom-floor-min: 24px;
}

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

html {
    height: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable both-edges;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100svh;
    height: 100dvh;
    font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    background: var(--chat-bg);
    color: var(--ink);
    overflow: hidden; /* evita salto ao surgir barras fixas */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------- App ---------------- */
.app-container {
    min-height: 100svh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--layout-max);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.08);
    border-radius: clamp(0px,1vw,16px);
    overflow: hidden;
}

.content-area {
    flex: 1;
    min-height: 0; /* permite filhos rolarem */
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    overflow: hidden;
}

/* ---------------- Contatos ---------------- */
.contact-container {
    min-width: 260px;
    max-width: 420px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 0;
    position: relative;
    contain: layout paint;
}

.search-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

    .search-bar input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #f8f9fb;
        outline: none;
        font-size: 15px;
    }

.contact-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg);
    padding-bottom: calc(var(--gs-menu-h) + 18px); /* evita cobertura pelo menu fixo */
    overscroll-behavior: contain;
}

.contact-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .15s ease;
    background: transparent;
    contain: layout paint;
}

    .contact-item:hover {
        background: #f9fafb;
    }

    .contact-item .contact-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        background: #eef3f8;
        border: 1px solid #d9e1ea;
    }

.contact-text {
    min-width: 0;
}

.contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.contact-name {
    font-weight: 900;
    color: var(--ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .1px;
    font-size: 15.5px;
}
/* datas do contato em verde */
.last-message-date {
    color: var(--date-green);
    font-weight: 700;
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: .2px;
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.message-preview {
    margin-top: 3px;
    color: #4b5563;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-subinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.online-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9aa7b5;
}

    .online-status.online {
        background: #10b981;
    }

    .online-status.new-message {
        background: #ef4444;
    }

.unread-count {
    background: #ef4444;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}

/* ---------- Linha vinho 3D ---------- */
.contact-item::after {
    content: "";
    position: absolute;
    left: 72px;
    right: calc(16px + var(--rise-w));
    bottom: 0;
    height: var(--line-thick);
    background: var(--divider-wine);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.28);
    pointer-events: none;
}

.contact-item::before {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 0;
    width: var(--rise-w);
    height: calc(var(--rise-h) + var(--line-thick));
    pointer-events: none;
    background: linear-gradient(to right, var(--divider-wine), var(--divider-wine)) bottom left/100% var(--line-thick) no-repeat, radial-gradient(circle at bottom left, var(--divider-wine) calc(var(--rise-h)+var(--line-thick)), transparent calc(var(--rise-h)+var(--line-thick)+1px)) bottom left/var(--rise-h) calc(var(--rise-h)+var(--line-thick)) no-repeat, linear-gradient(var(--divider-wine), var(--divider-wine)) top right/var(--line-thick) var(--rise-h) no-repeat;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(0,0,0,.30);
}

.contact-item:last-child::after,
.contact-item:last-child::before {
    display: none;
}

@media (max-width:640px) {
    .contact-item::after {
        left: 60px;
        right: calc(12px + var(--rise-w));
    }

    .contact-item::before {
        right: 12px;
    }
}

/* ---------------- Chat ---------------- */
.chat-container {
    min-width: 0;
    background: var(--chat-bg);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    position: relative; /* base para o fade e o composer */
}

.chat-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(140%) blur(6px);
}

.chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef3f8;
    border: 1px solid #d9e1ea;
}

#chatHeader {
    font-weight: 900;
    color: var(--ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#userStatus {
    margin-left: 8px;
    font-size: .95em;
    color: #6b7280;
}

/* === TIMELINE: rola por trás do composer (sem padding no fundo) === */
.chat-messages {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: clamp(12px,2vw,20px);
    padding-bottom: 12px; /* mínimo só p/ respiro visual; NÃO compensa o composer */
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(var(--chat-input-h) + var(--gs-menu-h) + env(safe-area-inset-bottom,0px));
}

/* Fade inferior para sugerir continuidade sob o composer (opcional) */
.chat-fade-bottom {
    position: fixed;
    left: var(--chat-left);
    right: var(--chat-right);
    bottom: calc(var(--gs-menu-h) + env(safe-area-inset-bottom,0px) + var(--chat-input-h));
    height: 32px;
    pointer-events: none;
    z-index: 1101; /* abaixo do composer (1102), acima da timeline */
    background: linear-gradient(to bottom, rgba(242,243,245,0), rgba(242,243,245,.9));
}

/* ---------- Chip de dia ---------- */
.date-chip {
    align-self: center;
    background: var(--date-green-bg);
    color: var(--date-green-ink);
    border: 1px solid rgba(22,163,74,.25);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .2px;
    padding: 6px 10px;
    border-radius: 999px;
    margin: 8px 0 14px;
    text-transform: uppercase;
}

/* ---------------- Bolhas ---------------- */
.message {
    max-width: min(76%,42rem);
    margin: 0 0 14px 0;
    padding: 14px 16px;
    border-radius: 18px;
    line-height: 1.6;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--msg-size);
    letter-spacing: .1px;
    font-weight: 600;
    background: var(--bubble-bg);
    color: #101418;
    border: 1px solid var(--bubble-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

    .message.received {
        align-self: flex-start;
        margin-right: auto;
        text-align: left;
    }

    .message.sent {
        align-self: flex-end;
        margin-left: auto;
        text-align: right;
    }

        /* rabinhos */
        .message.received::after,
        .message.sent::after {
            content: "";
            position: absolute;
            bottom: 10px;
            width: 12px;
            height: 12px;
            transform: rotate(45deg);
            background: #fff;
            border: 1px solid var(--bubble-border);
            border-top: none;
            border-left: none;
            box-shadow: 0 1px 0 rgba(0,0,0,.03);
        }

    .message.received::after {
        left: -6px;
    }

    .message.sent::after {
        right: -6px;
    }

    /* timestamps (pequenos e verdes) */
    .message .message-timestamp {
        align-self: flex-end;
        color: var(--date-green);
        font-weight: 700;
        font-size: var(--timestamp-size);
        margin-top: 2px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums slashed-zero;
        text-shadow: 0 1px 0 rgba(255,255,255,.3);
    }

    /* mídias */
    .message img, .message .chat-image {
        display: block;
        width: clamp(200px,52vw,520px);
        max-width: 100%;
        max-height: min(50vh,540px);
        object-fit: contain;
        border-radius: 14px;
        background: #0e0e0e;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }

    .message video, .message .chat-video {
        display: block;
        width: clamp(240px,56vw,560px);
        aspect-ratio: 16/9;
        height: auto;
        object-fit: cover;
        border-radius: 14px;
        background: #000;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }

    .message iframe, .message object {
        display: block;
        width: clamp(240px,56vw,580px);
        aspect-ratio: 4/3;
        height: auto;
        border: 0;
        border-radius: 14px;
        background: #111;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }

    .message audio, .message .chat-audio {
        width: clamp(240px,56vw,560px);
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
    }

    .message .caption {
        font-size: .96em;
        line-height: 1.35;
        color: #1f2937;
    }

/* reply */
.reply-quote {
    border-left: 3px solid #0ea5e9;
    padding-left: 8px;
    margin-bottom: 6px;
    color: #334155;
    font-size: .95em;
}

/* ---------------- Composer (fixo e alinhado ao chat) ---------------- */
.chat-input-container {
    position: fixed;
    left: var(--chat-left);
    right: var(--chat-right);
    bottom: calc(var(--gs-menu-h) + env(safe-area-inset-bottom,0px));
    z-index: 1102;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.06);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto auto; /* 📎 | textarea | Enviar | 🎤 */
    column-gap: 8px;
    align-items: center;
    max-width: var(--composer-max);
    margin: 0 auto; /* centraliza quando left/right = 0 */
}

    #messageInput, .chat-input-container textarea {
        min-height: 44px;
        max-height: 160px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        resize: none;
        overflow-y: auto;
        background: #f8f9fb;
        outline: none;
        color: var(--ink-strong);
        font-size: clamp(15.5px,1.9vw,17px);
    }

    .chat-input-container .btn {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        background: var(--send);
        color: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: .2s background,.2s transform;
        box-shadow: var(--shadow-1);
    }

        .chat-input-container .btn:hover {
            background: var(--send-hover);
            transform: translateY(-1px);
        }

        .chat-input-container .btn:active {
            transform: translateY(0);
        }

/* ---------------- Menu inferior (fixo e alinhado) ---------------- */
.gs-bottom-menu {
    position: fixed;
    left: var(--chat-left);
    right: var(--chat-right);
    bottom: 0;
    z-index: 1100;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    max-width: var(--composer-max);
    margin: 0 auto;
}

    .gs-bottom-menu .gs-scroll {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

        .gs-bottom-menu .gs-scroll::-webkit-scrollbar {
            display: none;
        }

    .gs-bottom-menu .gs-btn, .gs-bottom-menu button.btn {
        background: none;
        border: 0;
        cursor: pointer;
        color: #333;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 66px;
        height: 44px;
        padding: 2px 8px;
    }

        .gs-bottom-menu .gs-btn span {
            font-size: 11px;
            margin-top: 2px;
        }

/* botão destaque “Gisele” */
@keyframes giseleGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes giseleFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }
}

@keyframes giselePulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(0,219,182,.45)
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0,219,182,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0,219,182,0)
    }
}

#goToSiteBtn {
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(90deg,#00dbb6,#13a6ff,#00dbb6);
    background-size: 200% 200%;
    animation: giseleGradient 6s ease infinite, giseleFloat 2.2s ease-in-out infinite, giselePulseRing 2.6s ease-out infinite;
    box-shadow: 0 10px 22px rgba(0,219,182,.28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    #goToSiteBtn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 14px 28px rgba(0,219,182,.38);
    }

    #goToSiteBtn:active {
        transform: translateY(0) scale(.99);
        filter: brightness(.95);
    }

/* ---------------- Modais ---------------- */
#msgActionModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
}

    #msgActionModal.on {
        display: flex;
    }

    #msgActionModal .mam-backdrop {
        position: absolute;
        inset: 0;
        background: #0007;
    }

    #msgActionModal .mam-sheet {
        position: relative;
        z-index: 1;
        width: min(92vw,520px);
        background: #232b34;
        color: #eaf2ff;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,.45);
        overflow: hidden;
    }

.mam-head {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mam-preview {
    font-size: 13px;
    color: #cbd5e1;
    max-height: 88px;
    overflow: auto;
    line-height: 1.35;
}

.mam-actions {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    padding: 14px;
}

.mam-btn {
    background: #2e3944;
    border: 1px solid #43505c;
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

    .mam-btn:active {
        transform: translateY(1px);
    }

.mam-ico {
    font-size: 20px;
}

.mam-label {
    font-size: 13px;
    color: #d1d5db;
}

.mam-close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #39414a;
    color: #eaf2ff;
    border: none;
    border-radius: 10px;
    width: 36px;
    height: 32px;
    cursor: pointer;
}

/* Pré-visualização de anexos */
.preview-container {
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(15,18,25,.82);
    display: none;
    align-items: center;
    justify-content: center;
}

    .preview-container.is-open {
        display: flex;
    }

.preview {
    width: 520px;
    max-width: 98vw;
    height: 420px;
    max-height: 95vh;
    background: #151d27;
    border-radius: 18px;
    box-shadow: 0 0 24px #000c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.media-preview {
    flex: 1 1 0%;
    width: 100%;
    min-height: 0;
    min-width: 0;
    background: #111;
    overflow: hidden;
    position: relative;
    display: flex;
}

    .media-preview img, .media-preview video, .media-preview iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #111;
    }

    .media-preview audio {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

.caption-input {
    width: 100%;
    border: 0;
    border-top: 1px solid #242a3a;
    background: #222f;
    color: #fff;
    font-size: 1.06em;
    padding: 10px 16px;
    resize: none;
    min-height: 36px;
    box-sizing: border-box;
    z-index: 2;
}

.preview-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding: 8px 16px 12px 16px;
    background: #151d27;
    z-index: 2;
}

    .preview-buttons .btn {
        padding: 8px 14px;
        border-radius: 10px;
        border: 0;
        cursor: pointer;
        font-weight: 600;
    }

        .preview-buttons .btn.cancel {
            background: #3a0e0e;
            color: #fff;
        }

        .preview-buttons .btn:not(.cancel) {
            background: #19c56e;
            color: #fff;
        }

/* ---------------- Responsividade ---------------- */
@media (max-width:1220px) {
    .app-container {
        border-radius: 0;
    }
}

@media (max-width:1024px) {
    :root {
        --sidebar-w: 320px;
    }

    .content-area {
        grid-template-columns: var(--sidebar-w) 1fr;
    }
}

@media (max-width:880px) {
    .content-area {
        grid-template-columns: 100%;
    }

    .contact-container {
        width: 100%;
        height: 100%;
    }

    .chat-container {
        display: none;
        height: 100%;
        overflow-y: auto;
    }

        .chat-container.open {
            display: grid;
            width: 100%;
            height: 100%;
        }

    /* timeline segue sem padding extra; composição fixa cobre por cima */
    .chat-messages {
        padding: 12px;
    }

    .message {
        max-width: 88%;
    }

    .chat-input-container {
        border-radius: 12px 12px 0 0;
        left: 0;
        right: 0;
        max-width: none;
    }

    .gs-bottom-menu {
        left: 0;
        right: 0;
        max-width: none;
    }
}

@media (max-width:620px) {
    :root {
        --composer-max: 520px;
    }
}

@media (max-width:520px) {
    .gs-bottom-menu .gs-btn {
        min-width: 60px;
    }

    .message {
        font-size: clamp(17px,4.3vw,19px);
        line-height: 1.7;
    }

        .message .message-timestamp {
            font-size: .74em;
        }
}

@media (max-width:380px) {
    .gs-bottom-menu .gs-scroll > button:not(#goToSiteBtn) span,
    .gs-bottom-menu .gs-scroll > .gs-btn:not(#goToSiteBtn) span {
        display: none;
    }

    .gs-bottom-menu .gs-scroll > button:not(#goToSiteBtn),
    .gs-bottom-menu .gs-scroll > .gs-btn:not(#goToSiteBtn) {
        min-width: 52px;
    }
}

/* -------- Reafirma alinhamento do composer/rodapé -------- */
.chat-input-container {
    left: var(--chat-left);
    right: var(--chat-right);
}

/* -------- Preferências do usuário -------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* não deixar o navegador ancorar nas bolhas reais */
.chat-messages .message {
    overflow-anchor: none;
}

/* bolha fantasma que empurra as mensagens para cima */
.message.ghost-bottom {
    visibility: hidden; /* não aparece */
    background: transparent; /* não pinta */
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0; /* sem espaço extra */
    pointer-events: none;
    min-height: 0; /* será setado via JS */
}