diff --git a/style.css b/style.css index 894441c..ceb0e03 100644 --- a/style.css +++ b/style.css @@ -279,3 +279,38 @@ font-size: 12px; white-space: nowrap; } + +/* =============== LINE風チャット =============== */ + +.chat-bubble { + max-width: 75%; + padding: 10px 14px; + margin: 6px 0; + border-radius: 16px; + font-size: 15px; + line-height: 1.4; + display: inline-block; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +/* 他人のメッセージ(左) */ +.chat-left { + background: #fff; + border: 1px solid #ddd; + margin-left: 6px; +} + +/* 自分のメッセージ(右) */ +.chat-right { + background: #c8f7c5; + color: #333; + margin-left: auto; + margin-right: 6px; + text-align: left; +} + +/* 吹き出しコンテナ */ +.chat-line { + display: flex; + width: 100%; +}