﻿
/*■瑋倫採用黃金標準法則 9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■*/
.ChatBubbleAlignLeft {
    text-align: left; /*我方文字，框中有文字，總整體框靠右。只能放在這裡，不能放在.sent p\|/20251127B當中。\|/20250531B在此將框靠右，內部的標籤再將文字靠左*/
    /*本區使得聊天氣泡外框對話視窗靠右++++註：倘若將本區域砍掉，則聊天氣泡外框對話視窗將會靠左*/
}

.ChatBubbleAlignRight {
    text-align: right; /*我方文字，框中有文字，總整體框靠右。只能放在這裡，不能放在.sent p\|/20251127B當中。\|/20250531B在此將框靠右，內部的標籤再將文字靠左*/
    /*本區使得聊天氣泡外框對話視窗靠右++++註：倘若將本區域砍掉，則聊天氣泡外框對話視窗將會靠左*/
}

/*我方ME-包覆文字之氣泡外框999999999999999999999999999999*/
div .MEreceive{ /*註:原始狀態將無法換行，還必須於javascript中嵌入br標籤document.createElement('br')才能換行*/
  border: 4px solid #F00; /*方框的:粗細、型態、顏色*/
  border-radius: 20px;
  display: inline-block; /*●大重點：\|/20251127C倘若將本列砍掉，則外框水平寬度將無法縮小至緊密包覆所傳出的文字*/
  max-width: 80%;   /*最多僅能達到80%之頁面寬度*/
  background-color: #0F0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
  padding: 20px 30px 10px 25px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 18px 0px 20px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
  font-size: 20px; /*頁面中間已傳出之文字的大小*/
  line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
  color: blue; /*文字顏色*/
  text-align:left; /*我方文字，也就是在框內的文字，水平對齊靠左\|/20250531B之前將框靠右，在此內部的標籤再將文字靠左*/
  word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */    
}
/*我方ME-包覆文字之氣泡外框666666666666666666666666666666666*/

/*對方YOU-包覆文字之氣泡外框999999999999999999999999999999*/
div .YOUsent{ /*註:原始狀態將無法換行，還必須於javascript中嵌入br標籤document.createElement('br')才能換行*/
  border: 4px solid #F00; /*方框的:粗細、型態、顏色*/
  border-radius: 20px;
  display: inline-block; /*●大重點：\|/20251127C倘若將本列砍掉，則外框水平寬度將無法縮小至緊密包覆所傳出的文字*/
  max-width: 80%;   /*最多僅能達到80%之頁面寬度*/
  background-color: #FF0; /*我方輸出信息之文字底色-包覆文字之扁橢圓底色*/
  padding: 20px 30px 10px 25px; /*對話方框內部文字與方框邊界之間距*/
  margin: 10px 18px 0px 20px; /*對話方框對外距離(對話方框於外側所推出的距離;或說往外推出的距離)*/
  font-size: 20px; /*頁面中間已傳出之文字的大小*/
  line-height: 0.9; /*文字列與列之間的間距https://www.w3school.com.cn/css/css_text_spacing.asp*/
  color: blue; /*文字顏色*/
  text-align:left; /*我方文字，也就是在框內的文字，水平對齊靠左\|/20250531B之前將框靠右，在此內部的標籤再將文字靠左*/
  word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */    
}
/*對方YOU-包覆文字之氣泡外框666666666666666666666666666666666*/

/*■瑋倫採用黃金標準法則 6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■*/
