.twin-demo {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: 420px;
    height: 490px;
    min-width: 0;
    margin-inline: auto;
    border: 1px solid #e8e4f1;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    color: #262c3d;
    box-shadow: 0 12px 36px rgba(53, 38, 98, .12);
    font: 14px/1.45 system-ui, sans-serif;
}

.twin-demo-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    border-bottom: 1px solid #e8e4f1;
}

.twin-demo-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: #4568ff;
}

.twin-demo-header .twin-demo-avatar { width: 33px; height: 33px; }
.twin-demo-avatar svg { width: 65%; height: 65%; }

.twin-demo-online::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border: 1px solid white;
    border-radius: 50%;
    background: #30ce7b;
}

.twin-demo-name { display: grid; gap: 2px; }
.twin-demo-name small, .twin-demo-topic, .twin-demo-author { color: #67617d; font-size: 12px; }

.twin-demo-control {
    margin-inline-start: auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #67617d;
    cursor: pointer;
    font-size: 19px;
}

.twin-demo-control:hover { background: #f1edf7; }

.twin-demo-log {
    overflow: auto;
    min-height: 0;
    padding: 13px 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: #b1acbd transparent;
}

.twin-demo-log .twin-demo-topic { margin: 0 0 16px; text-align: center; }
.twin-demo-log .twin-demo-messages { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.twin-demo-line { display: flex; align-items: end; gap: 5px; }
.twin-demo-outgoing { justify-content: flex-end; }
.twin-demo-text { min-width: 0; max-width: 83%; }
.twin-demo-author { display: block; margin: 0 0 4px; }

.twin-demo-bubble {
    border-radius: 17px;
    padding: 8px 11px;
    background: #efedf3;
    overflow-wrap: anywhere;
}

.twin-demo-outgoing .twin-demo-bubble { color: white; background: #b52c81; }
.twin-demo-time { display: block; margin-top: 3px; text-align: end; font-size: 11px; opacity: .84; }

.twin-demo-compose {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 59px;
    padding: 7px 13px;
    border-top: 1px solid #e8e4f1;
    color: #938aa6;
}

.twin-demo-draft { flex: 1; min-width: 0; color: #262c3d; overflow-wrap: anywhere; }
.twin-demo-draft:empty::before { content: "Сообщение"; color: #827990; }
.twin-demo-clip, .twin-demo-send { flex: none; }
.twin-demo-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.twin-demo-send.is-ready { color: #fff; background: #b52c81; }
.twin-demo-send.is-sending { transform: scale(.83); }

.twin-demo-typing {
    display: flex;
    gap: 4px;
    width: fit-content;
    margin: 12px 0 0 28px;
    padding: 10px 13px;
    border-radius: 16px;
    background: #efedf3;
}

.twin-demo-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #766d89;
    animation: twin-demo-dot 1s ease-in-out infinite alternate;
}

.twin-demo-typing i:nth-child(2) { animation-delay: .14s; }
.twin-demo-typing i:nth-child(3) { animation-delay: .28s; }
.twin-demo [hidden] { display: none !important; }
@keyframes twin-demo-dot { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .twin-demo-typing i { animation: none; } }