body {
background:#000;
margin:0;
font-family:"MS UI Gothic","Times New Roman",Times,serif;
font-size:12px;
color:#fff;
line-height:15px;
}
html {
cursor: url("../img/cursor/curs.png"), auto;
}
a,
a:hover,
a:active {
cursor: url("../img/cursor/pointer.png"), pointer !important;
}
::selection {
background: rgba(0,0,0,0.7);
color: #737373;
}
.messages {
flex:1;
overflow-y:auto;
padding:12px;
display:flex;
flex-direction:column;
gap:10px;
}
.msg {
display:flex;
align-items:center;
gap:8px;
}
.msg.user {
justify-content:flex-end;
}
.icon {
width:50px;
height:50px;
object-fit:cover;
border:1px solid #111;
flex-shrink:0;
}
.bubble {
background:#111;
border:1px solid #222;
padding:8px 10px;
max-width:180px;
word-wrap:break-word;
}
.msg.user .bubble {
background:#1a1a1a;
border:1px solid #333;
}
.input-area {
border-top:1px solid #222;
padding:8px;
}
textarea {
width:95%;
height:42px;
background:#000;
color:#fff;
border:1px solid #222;
resize:none;
padding:6px;
font-family:inherit;
font-size:12px;
}
textarea:focus {
outline:none;
border-color:#444;
}
*, *::before, *::after{
box-sizing:border-box;
}
.messages {
padding:16px;
padding-bottom:80px; 
display:flex;
flex-direction:column;
gap:10px;
}
.msg {
display:flex;
align-items:center;
gap:8px;
}
.msg.user {
justify-content:flex-end;
}
.icon {
width:50px;
height:50px;
object-fit:cover;
border:1px solid #111;
flex-shrink:0;
user-select:none;
}
.bubble {
background:#111;
border:1px solid #222;
padding:8px 10px;
max-width:400px;
overflow-wrap:anywhere;
}
.msg.user .bubble {
background:#1a1a1a;
border:1px solid #333;
}
.input-area {
position:fixed;
bottom:0;
left:0;
width:100%;
background:#000;
border-top:1px solid #222;
padding:10px;
}
textarea {
width:100%;
height:44px;
background:#000;
color:#fff;
border:1px solid #222;
resize:none;
padding:6px;
font-family:inherit;
font-size:12px;
}
textarea:focus {
outline:none;
border-color:#444;
}