/* سند — شات فاخر قريب من واتساب */
/* المسار: /public_html/assets/css/chat-premium.css */

body {
    background: #efeae2 !important;
}

.sned-wa-page {
    min-height: 100vh;
    background:
        linear-gradient(rgba(239,234,226,.94), rgba(239,234,226,.94)),
        radial-gradient(circle at 20% 10%, rgba(37,211,102,.20), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(0,224,255,.12), transparent 26%);
    padding: 22px 12px 42px;
    direction: rtl;
}

.sned-wa-app {
    width: min(900px, 100%);
    margin: 0 auto;
    background: #f7f5f1;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #d8d0c6;
    box-shadow: 0 22px 70px rgba(29, 33, 37, .16);
}

.sned-wa-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #075e54, #128c7e);
    color: #fff;
}

.sned-wa-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #25d366, #00e0ff);
    color: #073b35;
    font-size: 23px;
    font-weight: 900;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}

.sned-wa-status-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 3px;
    bottom: 4px;
    border-radius: 50%;
    background: #25d366;
    border: 2px solid #075e54;
}

.sned-wa-title {
    flex: 1;
    min-width: 0;
}

.sned-wa-title h1 {
    color: #fff;
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
}

.sned-wa-title p {
    color: rgba(255,255,255,.86);
    margin: 0;
    font-size: 13px;
}

.sned-wa-home {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.sned-wa-messages {
    position: relative;
    min-height: 470px;
    max-height: 64vh;
    overflow-y: auto;
    padding: 18px 14px;
    background:
        linear-gradient(rgba(229,221,213,.92), rgba(229,221,213,.92)),
        radial-gradient(circle at 10px 10px, rgba(17,27,33,.08) 1.5px, transparent 2px) 0 0 / 36px 36px;
}

.sned-wa-day {
    width: fit-content;
    margin: 0 auto 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #667781;
    font-size: 12px;
    font-weight: 700;
}

.sned-wa-row {
    display: flex;
    margin: 8px 0;
}

.sned-wa-row.bot {
    justify-content: flex-start;
}

.sned-wa-row.user {
    justify-content: flex-end;
}

.sned-wa-bubble {
    position: relative;
    max-width: min(76%, 620px);
    padding: 9px 12px 18px;
    border-radius: 12px;
    color: #111b21;
    font-size: 16px;
    line-height: 1.75;
    box-shadow: 0 1px 1px rgba(11,20,26,.13);
}

.sned-wa-row.bot .sned-wa-bubble {
    background: #fff;
    border-top-right-radius: 3px;
}

.sned-wa-row.user .sned-wa-bubble {
    background: #d9fdd3;
    border-top-left-radius: 3px;
}

.sned-wa-bubble p {
    color: #111b21;
    margin: 0 0 4px;
}

.sned-wa-time {
    position: absolute;
    left: 9px;
    bottom: 4px;
    color: #667781;
    font-size: 10px;
    direction: ltr;
}

.sned-wa-bubble.typing {
    display: flex;
    gap: 5px;
    align-items: center;
    min-width: 58px;
    padding: 13px 15px;
}

.sned-wa-bubble.typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8696a0;
    animation: snedTyping 1.2s infinite ease-in-out;
}

.sned-wa-bubble.typing span:nth-child(2) {
    animation-delay: .15s;
}

.sned-wa-bubble.typing span:nth-child(3) {
    animation-delay: .30s;
}

@keyframes snedTyping {
    0%, 80%, 100% { transform: translateY(0); opacity: .45; }
    40% { transform: translateY(-4px); opacity: 1; }
}

.sned-wa-suggestions-wrap {
    background: #f7f5f1;
    border-top: 1px solid #e8e1d9;
    padding: 12px 14px 0;
}

.sned-wa-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sned-wa-suggestions button {
    border: 1px solid #b9ded7;
    background: #ffffff;
    color: #075e54;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.sned-wa-suggestions button:hover {
    background: #ecfff7;
    transform: translateY(-1px);
}

.sned-wa-compose {
    display: flex;
    gap: 10px;
    padding: 12px 14px 16px;
    background: #f7f5f1;
}

.sned-wa-compose input {
    flex: 1;
    height: 50px;
    border: 1px solid #d7d2cb;
    background: #fff;
    color: #111b21;
    border-radius: 999px;
    padding: 0 18px;
    outline: none;
    font-size: 16px;
}

.sned-wa-compose input:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 3px rgba(37,211,102,.14);
}

.sned-wa-compose button {
    height: 50px;
    min-width: 98px;
    border: none;
    border-radius: 999px;
    background: #25d366;
    color: #063b29;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.sned-wa-empty {
    padding: 42px 18px;
    text-align: center;
    color: #111b21;
}

.sned-wa-empty p {
    color: #667781;
}

.sned-wa-primary-link {
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    background: #25d366;
    color: #063b29;
    font-weight: 900;
}

@media (max-width: 700px) {
    .sned-wa-page {
        padding: 0;
    }

    .sned-wa-app {
        min-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .sned-wa-messages {
        min-height: calc(100vh - 245px);
        max-height: none;
    }

    .sned-wa-bubble {
        max-width: 88%;
        font-size: 15.5px;
    }

    .sned-wa-compose {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .sned-wa-compose button {
        min-width: 82px;
    }

    .sned-wa-home {
        display: none;
    }
}