*,html{box-sizing:border-box;margin:0;padding:0}.btn{height:100%}.body{box-sizing:border-box;flex-direction:column;align-items:center;width:95vw;max-width:600px;height:100vh;margin:auto;padding:20px;font-size:1.1rem;display:flex}.yn,.chat,.digiting{width:100%;min-width:200px}.digiting{gap:10px;display:flex}input{outline:none;flex:1;padding:12px 15px}input:focus{border-color:#007bff}.digiting button{aspect-ratio:1;padding:7px}.yn{height:auto;margin-bottom:5px}.chat{background:#f9f9f9;border:1px solid #ccc;border-radius:8px;flex-direction:column;gap:12px;height:100%;margin:10px;padding:15px;display:flex;overflow-y:auto}.msg-wrapper{width:100%;display:flex}.my-message{justify-content:flex-end}.others-message{justify-content:flex-start}.msg-item{border-radius:12px;max-width:85%;padding:8px 12px;font-size:.95rem;position:relative}.my-message .msg-item{color:#fff;background-color:#007bff;border-bottom-right-radius:2px}.others-message .msg-item{color:#333;background-color:#e9e9eb;border-bottom-left-radius:2px}.msg-item small{opacity:.8;margin-bottom:4px;font-size:.7rem;font-weight:700;display:block}.msg-item p{margin:0}.online{color:#28a745}.offline{color:#dc3545}@media (width<=480px){.body{padding:10px}.digiting input{padding:10px;font-size:.9rem}}