Design for AIBalões de chat
Balões de chat: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Can the card flip without JavaScript?
Yes. A checkbox and :checked does it.
Keyboard accessible?
If the input stays focusable, yes.
CSS
.card-079 {
display: flex;
flex-direction: column;
gap: 8px;
width: 320px;
padding: 16px;
background: #0f172a;
border-radius: 18px;
font-family: system-ui,sans-serif
}
.card-079 p {
margin: 0;
max-width: 78%;
padding: 9px 13px;
font-size: 14px;
line-height: 1.4
}
.card-079__them {
align-self: flex-start;
background: #1e293b;
color: #e2e8f0;
border-radius: 16px 16px 16px 4px
}
.card-079__me {
align-self: flex-end;
background: #3b82f6;
color: #fff;
border-radius: 16px 16px 4px 16px
}
.card-079 p:hover {
filter: brightness(1.1)
}
HTML
<div class="card-079">
<p class="card-079__them">Can the card flip without JavaScript?</p>
<p class="card-079__me">Yes. A checkbox and :checked does it.</p>
<p class="card-079__them">Keyboard accessible?</p>
<p class="card-079__me">If the input stays focusable, yes.</p>
</div>Prompt
Construa um card de chat de 320px sobre #0f172a com raio de 18px e padding de 16px, empilhando balões de mensagem com gap de 8px. Balões recebidos alinham à esquerda sobre #1e293b com texto #e2e8f0 e raio 16px 16px 16px 4px (canto inferior esquerdo pequeno); balões enviados alinham à direita sobre azul #3b82f6 com texto branco e raio 16px 16px 4px 16px. Os balões têm no máximo 78% de largura, texto 14px, padding 9px 13px, e clareiam um pouco no hover.