/* ── MO5LES Chat Section ── */
.mosles-section {
    background: #000;
    padding: 120px 40px;
    position: relative;
}

.mosles-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ── Left column ── */
.mosles-left {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
}

.mosles-tag {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 3px;
    color: #e60000;
    margin: 0 0 10px;
    text-align: center;
}

.mosles-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.mosles-name {
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 54px);
    letter-spacing: -1px;
    line-height: 1;
    background: linear-gradient(90deg, #e91e8c 0%, #e60000 40%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mosles-title {
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 56px);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 48px;
}

/* ── Chat input panel ── */
.mosles-chat-panel { }

.mosles-ai-text {
    color: #777;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    margin: 0 0 16px;
    text-align: center;
}

.mosles-input-wrap {
    display: flex;
    align-items: center;
    background: #191919;
    border-radius: 50px;
    padding: 12px 14px;
    gap: 10px;
    max-width: 420px;
}

.mosles-plus {
    color: #777;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.mosles-placeholder {
    flex: 1;
    color: #555;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    user-select: none;
}

.mosles-mic-icon {
    flex-shrink: 0;
    opacity: .7;
}

.mosles-send-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Right column ── */
.mosles-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mosles-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow: visible;
}

.mosles-row--bot  { justify-content: flex-start; align-items: flex-end; }
.mosles-row--user { justify-content: flex-end; }

/* ── Avatars ── */
.mosles-av {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.mosles-av--bubble {
    border-radius: 0;
    overflow: visible;
    width: auto;
    height: auto;
}

/* ── Line animations — shared 7.6s cycle: bot speaks first half, user second ── */
@keyframes mcLine1  { 0%,4%{width:0} 14%,36%{width:230px} 44%,100%{width:0} }
@keyframes mcLine2  { 0%,9%{width:0} 19%,36%{width:190px} 44%,100%{width:0} }
@keyframes mcLine3  { 0%,14%{width:0} 24%,36%{width:215px} 44%,100%{width:0} }
@keyframes mcLine4  { 0%,19%{width:0} 28%,36%{width:120px} 44%,100%{width:0} }

@keyframes mcLine1b { 0%,50%,54%{width:0} 64%,86%{width:230px} 94%,100%{width:0} }
@keyframes mcLine2b { 0%,50%,59%{width:0} 69%,86%{width:190px} 94%,100%{width:0} }
@keyframes mcLine3b { 0%,50%,64%{width:0} 74%,86%{width:215px} 94%,100%{width:0} }
@keyframes mcLine4b { 0%,50%,69%{width:0} 78%,86%{width:120px} 94%,100%{width:0} }

.mc-l1  { animation: mcLine1  7.6s ease-in-out infinite; }
.mc-l2  { animation: mcLine2  7.6s ease-in-out infinite; }
.mc-l3  { animation: mcLine3  7.6s ease-in-out infinite; }
.mc-l4  { animation: mcLine4  7.6s ease-in-out infinite; }

.mc-l1b { animation: mcLine1b 7.6s ease-in-out infinite; }
.mc-l2b { animation: mcLine2b 7.6s ease-in-out infinite; }
.mc-l3b { animation: mcLine3b 7.6s ease-in-out infinite; }
.mc-l4b { animation: mcLine4b 7.6s ease-in-out infinite; }

/* ── Typing dots ── */
@keyframes mcDot {
    0%,100% { opacity: .3; transform: translateY(0); }
    50%     { opacity: 1;  transform: translateY(-5px); }
}
.mc-dot1 { animation: mcDot 1.2s ease-in-out infinite; }
.mc-dot2 { animation: mcDot 1.2s ease-in-out infinite 0.4s; }
.mc-dot3 { animation: mcDot 1.2s ease-in-out infinite 0.8s; }

/* ── Brand bubble dots ── */
@keyframes mcBDot {
    0%,100% { opacity: .4; transform: translateY(0); }
    50%     { opacity: 1;  transform: translateY(-3px); }
}
.mc-bd1 { animation: mcBDot 1.4s ease-in-out infinite; }
.mc-bd2 { animation: mcBDot 1.4s ease-in-out infinite 0.35s; }
.mc-bd3 { animation: mcBDot 1.4s ease-in-out infinite 0.70s; }
.mc-bd4 { animation: mcBDot 1.4s ease-in-out infinite 1.05s; }

/* ── Robot wink ── */
@keyframes mcWink { 0%,72%,100%{opacity:0} 77%,90%{opacity:1} }
.mc-wink { animation: mcWink 4s ease-in-out infinite; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .mosles-inner {
        flex-direction: column;
        gap: 48px;
    }
    .mosles-left { flex: none; width: 100%; max-width: 420px; }
    .mosles-right { width: 100%; }
}

@media (max-width: 600px) {
    .mosles-section { padding: 80px 16px; }
    .mosles-bubble  { width: 240px !important; height: 114px !important; }
    .mosles-typing  { width: 100px !important; height: 65px !important; }
    .mosles-input-wrap { max-width: 100%; }
}