/*
參考：
http://cc.ee.ntu.edu.tw/~d01941025/zz_code_chatcontainerbox.css
zz_code_chatcontainerbox.css
CSS註解，必須使用=斜線+星號+星號+斜線，勿使用雙斜線


https://stackoverflow.com/questions/36824716/how-to-disable-text-input-in-textarea
I just need to disable typing any text into text-area, I want to use text-area just for showing text. I am making a chat web-site.

xmp pre textarea
*/

#AUOcadayLeft {
border: 4px solid #00F; /*方框的:粗細、型態、顏色*/
  padding: 20px 0px 10px 25px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 60px 0px 86px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
}


#AUOcadayLeftB {
border: 4px solid #FF0; /*方框的:粗細、型態、顏色*/
border-radius: 20px;
background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
  padding: 20px 0px 10px 25px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 88px 0px 20px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
  
}

/*5555555555555555555555555555555555555555555555555555555555555555555555*/


.row{
    display: block; /*本列可有可無*/
    padding: 5px 10%; /*[對話著色視窗]與外部(在此是瀏覽器)的距離++砍掉此列則對話視窗與瀏覽器將不會有距離存在*/
}

.recieved p { /*渲染對話視窗中，由[對方]所傳過來之文字的樣式*/
    display: inline-block;
    padding: 48px 34px; /*左邊是上下，右邊是左右++數字越大，文字與邊框的距離越遠*/
    background-color: #EEE; /*對方輸出信息之文字底色-包覆文字之扁橢圓底色*/
    color: #00F; /*對方輸出信息之文字顏色*/
    border-radius: 20px;
    max-width: 60%; /*使得對話視窗寬度收縮*/
    font-size: 26px; /*頁面中間所接收之文字(對方所傳來之信息)的大小*/
    line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
    /*border: 1px solid black;*/ /*本列開啟可見外圍橢圓框*/
    /*margin-left: -40px;*/ /*本列開啟則可將總整體對話框往左移*/
}


#tsair { /*渲染對話視窗中，由[對方]所傳過來之文字的樣式*/
    display: inline-block;
    padding: 8px 14px; /*左邊是上下，右邊是左右*/
    background-color: #EEE; /*對方輸出信息之文字底色-包覆文字之扁橢圓底色*/
    color: #00F; /*對方輸出信息之文字顏色*/
    border-radius: 20px;
    max-width: 80%;
    font-size: 26px; /*頁面中間所接收之文字(對方所傳來之信息)的大小*/
    line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
    /*border: 1px solid black;*/ /*本列開啟可見外圍橢圓框*/
    /*margin-left: -40px;*/ /*本列開啟則可將總整體對話框往左移*/
}
/*444444444444444444444444444444444444444444444444444444444444444444444444*/

.sent { /*本列存在的用意是為了將整個視窗往右移動，變成[我方]視窗++若無本列，則視窗靠左，看起來就像是[對方]視窗*/
    text-align: right;
    /*在此調整文字大小無效果*/font-size: 26px; /*中間最下排之輸入灰色框 中的文字大小*/
}

.sent p { /*渲染對話視窗中，由[我方]所傳出之文字的樣式*/
    display: inline-block;
    padding: 10px 20px;
    background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
    color: #F00; /*我方輸出信息之文字顏色*/
    border-radius: 20px;
    max-width: 70%;    
    font-size: 26px; /*頁面中間已傳出之文字的大小*/
    line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
    text-align:left; /*我方文字，水平對齊靠左*/
}

#alice { /*渲染對話視窗中，由[對方]所傳過來之文字的樣式*/
    display: inline-block;
    padding: 10px 20px;
    background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
    color: #F00; /*我方輸出信息之文字顏色*/
    border-radius: 20px;
    max-width: 80%;    
    font-size: 26px; /*頁面中間已傳出之文字的大小*/
    line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
    text-align:left; /*我方文字，水平對齊靠左*/
}

/*B7777777777777777777777777777777777777777777777777777777777777777777777*/

.containerB{
  /*padding: 10px;*/
  border: 1px solid silver;
  padding: 30px 50px -50px 0px; /*在此無效果+++對話方框內部文字與方框邊界之間距*/
  margin: 10px 160px 0px 86px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
box-sizing: border-box;/*本列無效果*/
}

.containerB .text{
background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
  resize: none;
  outline: none;
  width: 100%;
  padding: 0px 0px -50px 0px; /*對話方框內部文字與方框邊界之間距*/
/*margin: 10px 160px 300px 86px;*/  /*本列不應該存在，本列會導致灰色外框與內部著色區域脫離*/
  border: none;
  height: 100%;
  box-sizing: border-box; /*本列無效果*/
  /*margin: -10px;*/
}

/*7777777777777777777777777777777777777777777777777777777777777777777777*/

.container{
  /*padding: 10px;*/
  border: 1px solid silver;
  padding: 0px 0px -50px 0px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 60px 40px 86px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
}

.container .text{
background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
  resize: none;
  outline: none;
  width: 100%;
  padding: 0px 0px -50px 0px; /*對話方框內部文字與方框邊界之間距*/
  border: none;
  height: 100%;
  /*margin: -10px;*/
}

/*3333333333333333333333333333333333333333333333333333333333333333333333333333*/

/* Color and border CSS omitted for simplicity */

#wrapOUT { 
border: 4px solid #00F; /*方框的:粗細、型態、顏色*/
  padding: 20px 0px 10px 25px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 60px 500px 86px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
}  
#wrap{ 
/*position:absolute; */
top:10%; 
left:20%; 
right:30%; 
bottom:60%;

width: 100%;
    /*height: 100%; */
    box-sizing: border-box;
}
#wrapT { 
overflow:auto;
overflow:hidden; /*只是讓scrollbar消失，但若要呈現全部文字還是要靠拉的*/

/*width: 100%;*/ /*若開啟本列，則寬度會強制到最大，無法使用滑鼠拉扯使寬度縮小*/
    /*height: 100%; */
top:0; 
left:0; 
right:0; 
bottom:0; 
padding:1em;
/*resize: horizontal;*/ /* https://blog.csdn.net/gyueh/article/details/104696874 */
/*resize: vertical;*/
}

/*
https://stackoverflow.com/questions/16226463/html-css-display-html-code-with-xmp-pre-or-code
*/
xmp{ white-space:pre-wrap; word-wrap:break-word; }