@charset "utf-8";

.sideUserInfo {display:flex ; align-items:center; width:100%; border:1px solid var(--layout-gray-200); padding:8px; gap:8px; background:var(--layout-gray-50); border-radius: 6px;}
.sideUserInfo .profile_img {display:flex; justify-content:center; align-items:center; width:26px; height:26px; overflow:hidden; border-radius:50%; background:var(--layout-gray-100);}
.sideUserInfo .profile_img img {width:100%; height:100%; object-fit:cover;}
.sideUserInfo .nickname {font-size:14px; font-weight:600;}

#messageBox {display:flex; align-items:center; padding:6px 10px; min-height:30px; border:1px solid var(--layout-gray-300); border-radius:8px; background:var(--layout-white); width:100%; font-size:13px; color:var(--layout-gray-700); position:relative;}
#messageBox::before {content:''; display:block; position:absolute; z-index:9; left:50%; bottom:-8px; width:12px; height:12px; border:1px solid var(--layout-gray-300); border-top:0; border-left:0; background:var(--layout-white); transform:rotate(45deg);}
#messageBox #typewriter {white-space:nowrap; overflow:hidden; font-size:12px;}
#messageBox .cursor {animation:blink 1s infinite; margin-left:1px; color:var(--point-color); font-weight:100;}
@keyframes blink {0%,50% {opacity:1;} 51%,100% {opacity:0;}}
.sideUserMenu {display:flex; flex-wrap:wrap; padding:10px; border:1px solid var(--layout-gray-300); border-radius:8px; background:var(--layout-white); gap:4px;}
.sideUserMenu .sideWelcome {display:flex; flex-direction:column; align-items:center; width:100%; padding:10px; text-align:center; border:1px solid var(--layout-gray-200); background:var(--layout-gray-50); border-radius:6px;}
.sideUserMenu .sideWelcome i {font-size:28px; color:var(--point-color); margin-bottom:6px;}

/* Voxel Character Container */
#voxel-character-container {position:relative; width:100%; height:120px; cursor:pointer; margin-bottom:8px;}
#voxel-character-container:after {content:''; position:absolute; left:50%; bottom:-10px; width:80px; height:3px; border-radius:50%; background:rgba(0,0,0,0.4); transform:translate(-50%, 0);filter:blur(3px);}
#voxel-character-container canvas {display:block; width:100% !important; height:100% !important;}
.voxel-loader {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--point-color);}
.sideUserMenu a {display:flex ; align-items:center; width:calc(50% - 2px); padding:6px 10px; gap:8px;}