* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #0f172a;
    height: 100vh;
}

.chat-app {
    max-width: 900px;
    height: 100vh;
    margin: auto;
    background: #f1f5f9;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background: #075e54;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h2 {
    margin: 0;
    font-size: 18px;
}

.chat-header a {
    color: white;
    text-decoration: none;
    background: #0f766e;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
}



.message-row {
    display: flex;
    margin-bottom: 10px;
}

.message-row.mine {
    justify-content: flex-end;
}

.message-row.other {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 75%;
    padding: 10px 12px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
}

.mine .message-bubble {
    background: #dcf8c6;
    border-bottom-right-radius: 2px;
}

.other .message-bubble {
    background: white;
    border-bottom-left-radius: 2px;
}

.message-name {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
    color: #075e54;
}

.message-time {
    font-size: 11px;
    color: #666;
    text-align: right;
    margin-top: 5px;
}

.chat-form {
    display: flex;
    padding: 10px;
    background: #f8fafc;
    gap: 8px;
}

.chat-form input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 12px 15px;
    outline: none;
    font-size: 15px;
}

.chat-form button {
    border: none;
    background: #075e54;
    color: white;
    padding: 0 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
}

.chat-form button:hover {
    background: #064e45;
}

@media(max-width: 600px) {
    .chat-app {
        width: 100%;
        height: 100vh;
    }

    .message-bubble {
        max-width: 85%;
    }
}

.online-users{
    background: #d1fae5;
    padding: 8px 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}

.online-user{
    font-size: 13px;
    color: #065f46;
    font-weight: bold;
}

.chat-layout{
    display:flex;
    height:100vh;
}

.sidebar{
    width:260px;
    background:#111827;
    color:white;
    display:flex;
    flex-direction:column;
}

.sidebar-header{
    padding:20px;
    font-size:20px;
    font-weight:bold;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.chat-user{
    padding:15px 20px;
    color:white;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:.2s;
}

.chat-user:hover{
    background:#1f2937;
}

.chat-user.active{
    background:#075e54;
}

@media(max-width:700px){

    .sidebar{
        width:90px;
    }

    .chat-user{
        font-size:12px;
        padding:10px;
    }

    .sidebar-header{
        font-size:14px;
        padding:15px 10px;
    }
}

.chat-user-name {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

.chat-user-last {
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user.active .chat-user-last {
    color: #e0f2f1;
}

.upload-btn{
    background:#075e54;
    color:white;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    flex-shrink:0;
}

.chat-image-box{
    margin-top:8px;
}

.chat-image{
    max-width:250px;
    border-radius:12px;
    display:block;
}

.profile-page{
    min-height:100vh;
    background:#0f172a;
    display:flex;
    justify-content:center;
    align-items:center;
}

.profile-card{
    background:white;
    padding:30px;
    border-radius:20px;
    width:350px;
    text-align:center;
}

.profile-avatar{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;
}

.sidebar-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    margin-right:10px;
    vertical-align:middle;
}
.emoji-bar{
    background:#f8fafc;
    padding:8px 12px;
    border-top:1px solid #ddd;
    display:flex;
    gap:10px;
    overflow-x:auto;
}

.emoji-bar span{
    cursor:pointer;
    font-size:22px;
}
.typing-status{
    height:24px;
    padding:0 15px;
    font-size:13px;
    color:#555;
    font-style:italic;
    background:#f8fafc;
}
/* =========================
   RESPONSIVE CELULAR
========================= */

@media(max-width: 768px){

    body{
        height: 100vh;
        overflow: hidden;
    }

    .chat-layout{
        flex-direction: column;
        height: 100vh;
    }

    .sidebar{
        width: 100%;
        height: 95px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .sidebar-header{
        display: none;
    }

    .chat-user{
        min-width: 90px;
        height: 65px;
        padding: 10px 8px;
        text-align: center;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .sidebar-avatar{
        width: 38px;
        height: 38px;
        margin: 0 0 5px 0;
    }

    .chat-user-name{
        font-size: 12px;
        margin-bottom: 2px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-user-last{
        display: none;
    }

    .chat-app{
        width: 100%;
        height: calc(100vh - 95px);
        flex: 1;
    }

    .chat-header{
        padding: 10px;
    }

    .chat-header h2{
        font-size: 15px;
    }

    .chat-header a{
        padding: 6px 9px;
        font-size: 12px;
    }



    .message-bubble{
        max-width: 85%;
        font-size: 14px;
    }

    .chat-form{
        padding: 8px;
        gap: 6px;
    }

    .chat-form input{
        font-size: 14px;
        padding: 10px 12px;
    }

    .chat-form button{
        padding: 0 14px;
        font-size: 13px;
    }

    .upload-btn{
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .emoji-bar{
        padding: 6px 8px;
        gap: 8px;
    }

    .emoji-bar span{
        font-size: 20px;
    }

    .chat-image{
        max-width: 190px;
    }

    .typing-status{
        height: 22px;
        font-size: 12px;
        padding: 2px 10px;
    }
}
@media(max-width: 768px){

    html,
    body{
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    .chat-layout{

        overflow: hidden;
    }

    .sidebar{
        height: 75px;
        min-height: 75px;
    }

    .chat-user{
        height: 75px;
        min-width: 78px;
        padding: 6px;
    }

    .sidebar-avatar{
        width: 32px;
        height: 32px;
    }

    .chat-app{
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .chat-header{
        flex-shrink: 0;
    }

    .emoji-bar{
        flex-shrink: 0;
    }

    .typing-status{
        flex-shrink: 0;
    }



    .chat-form{
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}
.message-bubble{
    position: relative;
}

.message-reaction{
    position: absolute;
    bottom: -14px;
    right: 8px;
    background: white;
    border-radius: 20px;
    padding: 1px 6px;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.reaction-picker{
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border-radius: 25px;
    padding: 6px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 50;
    white-space: nowrap;
}

.reaction-picker span{
    cursor: pointer;
    font-size: 20px;
    margin: 0 3px;
}
.delete-message-btn{
    margin-top: 6px;
    border: none;
    background: transparent;
    color: #b91c1c;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    display: block;
}

.delete-message-btn:hover{
    text-decoration: underline;
}
.search-bar{
    display:flex;
    gap:8px;
    padding:8px 10px;
    background:#f8fafc;
    border-bottom:1px solid #ddd;
    flex-shrink:0;
}

.search-bar input{
    flex:1;
    border:1px solid #ccc;
    border-radius:20px;
    padding:8px 12px;
    outline:none;
    font-size:14px;
}

.search-bar button{
    border:none;
    background:#075e54;
    color:white;
    border-radius:20px;
    padding:8px 14px;
    cursor:pointer;
    font-size:13px;
}

.no-results{
    text-align:center;
    color:#555;
    padding:20px;
    font-size:14px;
}
.chat-file-box{
    margin-top:8px;
}

.chat-file-link{
    display:inline-block;
    background:#f1f5f9;
    color:#075e54;
    text-decoration:none;
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
    font-weight:bold;
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mine .chat-file-link{
    background:#ecfccb;
}

.chat-file-link:hover{
    text-decoration:underline;
}

.record-btn{
    background:#075e54;
    color:white;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    flex-shrink:0;
}

.record-btn.recording{
    background:#dc2626;
    animation:pulseRecord 1s infinite;
}

@keyframes pulseRecord{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
    100%{
        transform:scale(1);
    }
}

.chat-audio-box{
    margin-top:8px;
}

.chat-audio-box audio{
    max-width:240px;
    width:100%;
}
.record-btn{
    width:38px;
    height:38px;
    font-size:17px;
}
.voice-message{
    margin-top:8px;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.55);
    padding:8px 10px;
    border-radius:18px;
    min-width:210px;
    max-width:260px;
}

.mine .voice-message{
    background:rgba(255,255,255,.45);
}

.voice-play-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#075e54;
    color:white;
    cursor:pointer;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.voice-info{
    flex:1;
    min-width:0;
}

.voice-title{
    font-size:12px;
    font-weight:bold;
    color:#075e54;
    margin-bottom:5px;
}

.voice-wave{
    display:flex;
    align-items:center;
    gap:3px;
    height:20px;
}

.voice-wave span{
    width:3px;
    background:#075e54;
    border-radius:10px;
    display:block;
}

.voice-wave span:nth-child(1){height:8px;}
.voice-wave span:nth-child(2){height:13px;}
.voice-wave span:nth-child(3){height:18px;}
.voice-wave span:nth-child(4){height:10px;}
.voice-wave span:nth-child(5){height:16px;}
.voice-wave span:nth-child(6){height:7px;}
.voice-wave span:nth-child(7){height:14px;}
.voice-wave span:nth-child(8){height:19px;}
.voice-wave span:nth-child(9){height:11px;}
.voice-wave span:nth-child(10){height:15px;}

.voice-wave.playing span{
    animation:voiceWave .8s infinite ease-in-out;
}

.voice-wave.playing span:nth-child(2){
    animation-delay:.1s;
}

.voice-wave.playing span:nth-child(3){
    animation-delay:.2s;
}

.voice-wave.playing span:nth-child(4){
    animation-delay:.3s;
}

.voice-wave.playing span:nth-child(5){
    animation-delay:.4s;
}

@keyframes voiceWave{
    0%,100%{
        transform:scaleY(.7);
    }
    50%{
        transform:scaleY(1.4);
    }
}

@media(max-width:768px){
    .voice-message{
        min-width:190px;
        max-width:220px;
        padding:7px 9px;
    }

    .voice-play-btn{
        width:34px;
        height:34px;
        font-size:13px;
    }

    .voice-title{
        font-size:11px;
    }
}
.profile-card-wide{
    width:420px;
    max-width:92%;
}

.profile-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
    margin-top:15px;
}

.profile-form label{
    font-size:13px;
    font-weight:bold;
    color:#334155;
}

.profile-form input{
    width:100%;
    padding:11px 12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    outline:none;
    font-size:14px;
}

.profile-form button{
    margin-top:8px;
    border:none;
    background:#075e54;
    color:white;
    padding:11px;
    border-radius:12px;
    font-weight:bold;
    cursor:pointer;
}

.profile-form button:hover{
    background:#064e45;
}

.profile-msg{
    background:#d1fae5;
    color:#065f46;
    padding:10px;
    border-radius:10px;
    font-weight:bold;
    font-size:14px;
}

.profile-error{
    background:#fee2e2;
    color:#991b1b;
    padding:10px;
    border-radius:10px;
    font-weight:bold;
    font-size:14px;
}

.back-chat-btn{
    display:inline-block;
    text-decoration:none;
    background:#111827;
    color:white;
    padding:10px 16px;
    border-radius:20px;
    font-size:14px;
}

.profile-card hr{
    border:none;
    border-top:1px solid #e5e7eb;
    margin:22px 0;
}

@media(max-width:768px){
    .profile-page{
        align-items:flex-start;
        padding:20px 0;
        overflow-y:auto;
    }

    .profile-card-wide{
        width:92%;
        padding:22px;
    }

    .profile-avatar{
        width:110px;
        height:110px;
    }
}
/* =========================
   PERFIL MODERNO
========================= */

.modern-profile-page{
    background:
        radial-gradient(circle at top left, rgba(20,184,166,.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(15,23,42,.35), transparent 35%),
        #0f172a;
    padding:30px 15px;
    align-items:flex-start;
    overflow-y:auto;
}

.profile-shell{
    width:100%;
    max-width:920px;
    margin:auto;
}

.profile-top-card{
    position:relative;
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    margin-bottom:18px;
}

.profile-cover{
    height:120px;
    background:linear-gradient(135deg, #075e54, #0f766e, #14b8a6);
}

.profile-main-info{
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 25px 25px;
    margin-top:-42px;
}

.profile-avatar-modern{
    width:115px;
    height:115px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid white;
    background:white;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.profile-main-info h2{
    margin:45px 0 4px;
    font-size:26px;
    color:#0f172a;
}

.profile-main-info p{
    margin:0;
    color:#64748b;
    font-size:14px;
}

.back-chat-btn-modern{
    position:absolute;
    top:18px;
    right:18px;
    background:rgba(255,255,255,.95);
    color:#075e54;
    text-decoration:none;
    padding:9px 15px;
    border-radius:999px;
    font-size:14px;
    font-weight:bold;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.profile-alert{
    padding:13px 16px;
    border-radius:14px;
    font-weight:bold;
    font-size:14px;
    margin-bottom:15px;
}

.profile-alert.success{
    background:#d1fae5;
    color:#065f46;
}

.profile-alert.error{
    background:#fee2e2;
    color:#991b1b;
}

.profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.profile-section-card{
    background:white;
    border-radius:22px;
    padding:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.profile-section-card.full{
    grid-column:1 / -1;
}

.section-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.section-title span{
    width:42px;
    height:42px;
    border-radius:14px;
    background:#ecfdf5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
}

.section-title h3{
    margin:0;
    color:#0f172a;
    font-size:18px;
}

.section-title p{
    margin:3px 0 0;
    color:#64748b;
    font-size:13px;
}

.modern-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.input-group-modern{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.input-group-modern label{
    font-size:13px;
    font-weight:bold;
    color:#334155;
}

.input-group-modern input{
    border:1px solid #cbd5e1;
    border-radius:14px;
    padding:12px 14px;
    font-size:14px;
    outline:none;
    transition:.2s;
}

.input-group-modern input:focus{
    border-color:#0f766e;
    box-shadow:0 0 0 3px rgba(15,118,110,.15);
}

.modern-form button{
    border:none;
    background:linear-gradient(135deg, #075e54, #0f766e);
    color:white;
    padding:12px 16px;
    border-radius:14px;
    font-weight:bold;
    cursor:pointer;
    font-size:14px;
    transition:.2s;
}

.modern-form button:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(7,94,84,.25);
}

.file-upload-box{
    border:2px dashed #99f6e4;
    background:#f0fdfa;
    border-radius:18px;
    padding:22px;
    text-align:center;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#0f766e;
    font-weight:bold;
}

.file-upload-box input{
    display:none;
}

.file-upload-box small{
    color:#64748b;
    font-weight:normal;
}

.password-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    align-items:end;
}

.password-grid button{
    height:43px;
    white-space:nowrap;
}

/* =========================
   PERFIL CELULAR
========================= */

@media(max-width:768px){

    .modern-profile-page{
        padding:15px 10px;
    }

    .profile-cover{
        height:95px;
    }

    .profile-main-info{
        padding:0 18px 20px;
        gap:13px;
        margin-top:-35px;
    }

    .profile-avatar-modern{
        width:88px;
        height:88px;
        border-width:4px;
    }

    .profile-main-info h2{
        font-size:20px;
        margin:35px 0 3px;
    }

    .profile-main-info p{
        font-size:13px;
    }

    .back-chat-btn-modern{
        top:12px;
        right:12px;
        padding:7px 11px;
        font-size:12px;
    }

    .profile-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .profile-section-card{
        padding:18px;
        border-radius:18px;
    }

    .password-grid{
        grid-template-columns:1fr;
    }

    .section-title h3{
        font-size:16px;
    }

    .section-title p{
        font-size:12px;
    }
}

/* =========================
   LOGIN MODERNO
========================= */

.login-body{
    margin:0;
    min-height:100vh;
    overflow:auto !important;
    font-family:Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(20,184,166,.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(15,23,42,.45), transparent 35%),
        #0f172a;
}

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.login-card{
    width:100%;
    max-width:380px;
    background:white;
    border-radius:26px;
    padding:34px 28px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.login-logo{
    width:72px;
    height:72px;
    margin:0 auto 18px;
    border-radius:22px;
    background:linear-gradient(135deg, #075e54, #14b8a6);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    box-shadow:0 12px 28px rgba(7,94,84,.35);
}

.login-card h1{
    margin:0;
    font-size:28px;
    color:#0f172a;
}

.login-card p{
    margin:8px 0 22px;
    color:#64748b;
    font-size:14px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.login-form input{
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:13px 15px;
    font-size:15px;
    outline:none;
}

.login-form input:focus{
    border-color:#0f766e;
    box-shadow:0 0 0 3px rgba(15,118,110,.15);
}

.login-form button{
    border:none;
    background:linear-gradient(135deg, #075e54, #0f766e);
    color:white;
    padding:13px;
    border-radius:16px;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.login-form button:hover{
    background:linear-gradient(135deg, #064e45, #0f766e);
}

.login-error{
    background:#fee2e2;
    color:#991b1b;
    padding:10px;
    border-radius:12px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:15px;
}

.login-footer{
    margin-top:22px;
    color:#94a3b8;
    font-size:12px;
}

@media(max-width:768px){
    .login-card{
        max-width:92%;
        padding:30px 22px;
    }

    .login-logo{
        width:64px;
        height:64px;
        font-size:30px;
    }

    .login-card h1{
        font-size:24px;
    }
}

.login-success{
    background:#d1fae5;
    color:#065f46;
    padding:10px;
    border-radius:12px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:15px;
}

.login-link{
    color:#075e54;
    font-weight:bold;
    text-decoration:none;
}

.login-link:hover{
    text-decoration:underline;
}
.notify-btn{
    border:none;
    background:#facc15;
    color:#111827;
    padding:8px 11px;
    border-radius:20px;
    font-size:14px;
    cursor:pointer;
    font-weight:bold;
    margin-right:5px;
}

.notify-btn:hover{
    background:#eab308;
}

@media(max-width:768px){
    .notify-btn{
        padding:6px 8px;
        font-size:12px;
    }
}

/* =========================
   CHAT MOBILE FINAL LIMPIO
========================= */

body.chat-body{
    margin:0;
    padding:0;
    overflow:hidden;
}

body.chat-body .chat-layout{
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
}

body.chat-body .chat-app{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

body.chat-body .chat-header,
body.chat-body .search-bar,
body.chat-body .emoji-bar,
body.chat-body .typing-status,
body.chat-body .chat-form{
    flex-shrink:0;
}

body.chat-body .chat-box{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}

/* SOLO CELULAR / PWA */
@media(max-width:768px){

    html,
    body.chat-body{
        width:100%;
        height:100dvh;
        max-height:100dvh;
        overflow:hidden;
        position:fixed;
        inset:0;
    }

    body.chat-body .chat-layout{
        position:fixed;
        inset:0;
        width:100%;
        height:100dvh;
        max-height:100dvh;
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }

    body.chat-body .sidebar{
        width:100%;
        height:70px;
        min-height:70px;
        max-height:70px;
        flex-shrink:0;
        overflow-x:auto;
        overflow-y:hidden;
        display:flex;
    }

    body.chat-body .sidebar-header{
        display:none;
    }

    body.chat-body .chat-user{
        min-width:78px;
        height:70px;
        padding:6px;
        border-bottom:none;
        border-right:1px solid rgba(255,255,255,.08);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        flex-shrink:0;
    }

    body.chat-body .sidebar-avatar{
        width:30px;
        height:30px;
        margin:0 0 4px 0;
    }

    body.chat-body .chat-user-name{
        font-size:11px;
        max-width:70px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.chat-body .chat-user-last{
        display:none;
    }

    body.chat-body .chat-app{
        width:100%;
        height:calc(100dvh - 70px);
        max-height:calc(100dvh - 70px);
        min-height:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }

    body.chat-body .chat-header{
        min-height:48px;
        padding:8px 10px;
    }

    body.chat-body .chat-header h2{
        font-size:14px;
    }

    body.chat-body .chat-header a,
    body.chat-body .notify-btn{
        font-size:11px;
        padding:6px 7px;
    }

    body.chat-body .search-bar{
        padding:6px 8px;
    }

    body.chat-body .emoji-bar{
        padding:5px 8px;
    }

    body.chat-body .typing-status{
        height:20px;
        min-height:20px;
        padding:2px 10px;
        font-size:12px;
    }

    body.chat-body .chat-box{
        flex:1;
        min-height:0;
        height:auto;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        padding:10px;
    }

    body.chat-body .chat-form{
        width:100%;
        min-height:54px;
        flex-shrink:0;
        display:flex;
        align-items:center;
        gap:6px;
        padding:7px 8px;
        padding-bottom:calc(7px + env(safe-area-inset-bottom));
        background:#f8fafc;
        position:relative;
        z-index:999;
    }

    body.chat-body .upload-btn,
    body.chat-body .record-btn{
        width:36px;
        height:36px;
        min-width:36px;
        max-width:36px;
        flex-shrink:0;
        font-size:16px;
    }

    body.chat-body .chat-form input#message{
        flex:1;
        min-width:0;
        height:36px;
        padding:8px 10px;
        font-size:13px;
    }

    body.chat-body .chat-form button[type="submit"]{
        height:36px;
        flex-shrink:0;
        padding:0 10px;
        font-size:12px;
    }

    body.chat-body .message-bubble{
        max-width:86%;
        font-size:13px;
    }

    body.chat-body .chat-image{
        max-width:180px;
    }
}
/* =========================
   FIX PWA CELULAR ALTURA REAL
========================= */

@media(max-width:768px){

    html,
    body.chat-body{
        width:100% !important;
        height:var(--app-height) !important;
        max-height:var(--app-height) !important;
        min-height:var(--app-height) !important;
        overflow:hidden !important;
        margin:0 !important;
        padding:0 !important;
        position:fixed !important;
        inset:0 !important;
    }

    body.chat-body .chat-layout{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:var(--app-height) !important;
        max-height:var(--app-height) !important;
        min-height:var(--app-height) !important;
        overflow:hidden !important;
        display:flex !important;
        flex-direction:column !important;
    }

    body.chat-body .sidebar{
        width:100% !important;
        height:68px !important;
        min-height:68px !important;
        max-height:68px !important;
        flex-shrink:0 !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        display:flex !important;
    }

    body.chat-body .chat-app{
        width:100% !important;
        height:calc(var(--app-height) - 68px) !important;
        max-height:calc(var(--app-height) - 68px) !important;
        min-height:0 !important;
        overflow:hidden !important;
        display:flex !important;
        flex-direction:column !important;
    }

    body.chat-body .chat-header,
    body.chat-body .search-bar,
    body.chat-body .emoji-bar,
    body.chat-body .typing-status,
    body.chat-body .chat-form{
        flex-shrink:0 !important;
    }

    body.chat-body .chat-header{
        min-height:44px !important;
        padding:7px 9px !important;
    }

    body.chat-body .search-bar{
        padding:5px 8px !important;
    }

    body.chat-body .emoji-bar{
        min-height:36px !important;
        padding:5px 8px !important;
    }

    body.chat-body .typing-status{
        height:20px !important;
        min-height:20px !important;
        padding:2px 10px !important;
    }

    body.chat-body .chat-box{
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        padding:10px !important;
    }

    body.chat-body .chat-form{
        min-height:52px !important;
        width:100% !important;
        display:flex !important;
        align-items:center !important;
        gap:6px !important;
        padding:7px 8px !important;
        padding-bottom:calc(7px + env(safe-area-inset-bottom)) !important;
        background:#f8fafc !important;
        position:relative !important;
        z-index:9999 !important;
    }

    body.chat-body .upload-btn,
    body.chat-body .record-btn{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        flex-shrink:0 !important;
    }

    body.chat-body .chat-form input#message{
        flex:1 !important;
        min-width:0 !important;
        height:36px !important;
        padding:8px 10px !important;
        font-size:13px !important;
    }

    body.chat-body .chat-form button[type="submit"]{
        height:36px !important;
        flex-shrink:0 !important;
        padding:0 10px !important;
        font-size:12px !important;
    }
}