* { box-sizing: border-box; font-family: Arial, sans-serif; }

body {
    margin: 0;
    height: 100vh;
    background: #d7e3f0;
}

.tg-app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: auto;
    background: #e5edf5;
}

/* HEADER */
.tg-header {
    background: #0088cc;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tg-title { font-weight: bold; }
.tg-sub { font-size: 12px; opacity: .9; }

/* MESSAGES */
.tg-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

/* BUBBLES */
.msg {
    max-width: 75%;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    clear: both;
}
.msg.me {
    background: #dcf8c6;
    margin-left: auto;
    border-bottom-right-radius: 2px;
}
.msg.other {
    background: white;
    margin-right: auto;
    border-bottom-left-radius: 2px;
}
.name {
    font-size: 12px;
    color: #0088cc;
}
.msg img, .msg video {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 5px;
}
.text { margin-top: 4px; }

/* INPUT */
.tg-input {
    display: flex;
    padding: 10px;
    background: #f1f1f1;
}
.tg-input input[type=text] {
    flex: 1;
    border-radius: 20px;
    border: none;
    padding: 10px;
    outline: none;
}
.tg-input button {
    background: #0088cc;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 5px;
}
.attach { font-size: 22px; cursor: pointer; padding: 0 8px; }

/* MOBILE */
@media(max-width:600px){
    .msg { max-width: 90%; }
}