﻿
/*■瑋倫採用黃金標準法則 9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■*/
#ChatBubbleAlignRight {
    text-align: right; /*我方文字，框中有文字，總整體框靠右。只能放在這裡，不能放在.sent p\|/20251127B當中。\|/20250531B在此將框靠右，內部的標籤再將文字靠左*/
    /*本區使得聊天氣泡外框對話視窗靠右++++註：倘若將本區域砍掉，則聊天氣泡外框對話視窗將會靠左*/
}

/*包覆文字之氣泡外框999999999999999999999999999999*/
#demosandy9 div { /*註:原始狀態將無法換行，還必須於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/ */    
}
/*包覆文字之氣泡外框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■*/

/*⬛⬛⬛⬛↓↓↓↓擷取供給：於方框內輸入文字，方框高度會自動提升↓↓↓↓⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛*/
#ta-framewilly { /*本處為外部方框，外部方框用來包覆內部輸入文字的方框*/
  margin: 0;
  padding: 10px 10px;
  max-width: 1230px; /*●使用max-width，則於瀏覽器縮小時，方框自動隨瀏覽器縮小。瀏覽器變大時，最大只能到達max-width寬度●使用width則瀏覽器縮小時，方框依舊維持固定，參考https://www.w3schools.com/css/tryit.asp?filename=trycss_max-width  */
  height: 40px; /* \|/20250703B 甲=乙=丙=丁。本處是.甲:外部方框高度++++丁在.js中 */
  /*border-top: 10px solid gray;*/ /*四邊方框上面的一邊(單邊)線*/
  background-color: #F00; /*四邊方框的顏色*/
}

#textareaTSAIR {  /*內部輸入文字的方框*/
  overflow: hidden;
  margin:  0;
  padding: 0;
  border:  0;
  outline: 0;
  width: 100%;
  height: 40px; /* \|/20250703B 甲=乙=丙=丁。本處是.乙:內部方框高度++++丁在.js中 */
  font-size: 34px; /* \|/20250703D見.js++++\|/20250703B 甲=乙=丙=丁。本處是.丙:內部方框文字大小，要比甲、乙、丁更小些，才可於輸入文字時，方框不會因著所輸入的文字而改變高度、也可避免初始狀態產生垂直scrollbar++++丁在.js中 */
  resize: none;
  color: orange; /*文字顏色*/

/*9999 瑋倫獨創，於輸入文字過多時，生成垂直scrollbar 999999999999999999999999999999999999999999999999999*/
/*  overflow:scroll;*/ /*選擇A_本法會使水平與垂直scrollbar同時呈現 參考https://css-tricks.com/forums/topic/why-no-scroll-bar-when-using-a-div-within-a-div/*/

    overflow: auto; /*選擇B_於文字過多時，自動呈現垂直scrollbar。本法可僅呈現水平或垂直scrollbar，參考https://stackoverflow.com/questions/9940280/how-to-have-only-a-vertical-scroll-bar-on-a-div*/
    overflow-x: hidden; /*選擇B_本法可僅呈現水平或垂直scrollbar，參考https://stackoverflow.com/questions/9940280/how-to-have-only-a-vertical-scroll-bar-on-a-div*/
/*6666 瑋倫獨創，於輸入文字過多時，生成垂直scrollbar 6666666666666666666666666666666666666666666666666666*/    
}
/*⬛⬛⬛⬛↑↑↑↑擷取供給：於方框內輸入文字，方框高度會自動提升↑↑↑↑⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛*/

