/*=================================================
                    CHAT
=================================================*/

.chat-page{

    height:100vh;

    display:flex;

    flex-direction:column;

    background:var(--page-bg);

}

/*=================================================
                HEADER
=================================================*/

.chat-header{

    background:linear-gradient(135deg,#1565c0,#1e88e5);

    color:white;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.chat-header a{

    color:white;

    font-size:22px;

}

.robot{

    width:55px;

    height:55px;

    border-radius:50%;

    background:rgba(255,255,255,.2);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}

.chat-header h5{

    margin:0;

    font-weight:700;

}

.chat-header small{

    opacity:.9;

}

/*=================================================
                BODY
=================================================*/

.chat-body{

    flex:1;

    overflow-y:auto;

    padding:25px 18px calc(var(--bottom-nav-height) + 30px);

}

@media(min-width:1024px){

    .chat-page{
        border-radius:28px;
        overflow:hidden;
        border:1px solid var(--border);
        box-shadow:var(--shadow-md);
    }

    .chat-body{
        padding:28px 32px calc(var(--bottom-nav-height) + 50px);
    }

    .bubble{
        max-width:72%;
        border-radius:22px;
    }

}

/*=================================================
                MENSAJES
=================================================*/

.message{

    display:flex;

    margin-bottom:18px;

    animation:fadeMessage .35s ease;

}

.message.bot{

    justify-content:flex-start;

}

.message.me{

    justify-content:flex-end;

}

.bubble{

    background:var(--card);

    padding:15px 18px;

    border-radius:20px;

    max-width:85%;

    box-shadow:var(--shadow-sm);

    line-height:1.6;

}

.me-bubble{

    background:var(--primary-color);

    color:var(--surface);

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary-color);

}

.selection-card{

    background:var(--surface);

    border-radius:24px;

    padding:22px;

    box-shadow:var(--shadow-sm);

}

.mapa-demo{
    width:100%;
    height:220px;
    border-radius:12px;
    margin:15px 0;
    position:relative;
    overflow:hidden;
    border:1px solid var(--border-color);

    background:
        linear-gradient(90deg,var(--card-secondary) 48%,var(--muted) 50%,var(--card-secondary) 52%),
        linear-gradient(var(--card-secondary) 48%,var(--muted) 50%,var(--card-secondary) 52%);

    background-size:70px 70px;
    background-color:var(--card-secondary);
}

.pin{
    position:absolute;
    top:45%;
    left:60%;
    transform:translate(-50%,-100%);
    font-size:34px;
    animation:rebote 1s infinite;
}

@keyframes rebote{
    0%,100%{
        transform:translate(-50%,-100%);
    }
    50%{
        transform:translate(-50%,-115%);
    }
}

.chat-layout{

    display:flex;

    min-height:100vh;

}

.main-content{

    flex:1;

    display:flex;

    flex-direction:column;

}

.chat-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--surface);

    padding:18px 22px;

    border-radius:18px;

    margin-bottom:18px;

    box-shadow:var(--shadow-sm);

}

.chat-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.robot{

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary-color);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:var(--surface);

}

.chat-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#4caf50;

    font-weight:600;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4caf50;

}

.chat-body{

    background:var(--card-secondary);

    border-radius:20px;

    padding:20px;

    flex:1;

    overflow-y:auto;

}