@import "global.css";

#chat div.empty{
    width: 49%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#chat .topMenu {
    position: absolute;
    top: 0;
    width: 49%;
}

#chat .topMenu img{
    float: right;
    margin-top: 12px;
    margin-right: 20px;
    cursor: pointer;
}

#chat .innerContainer {
    width: 100%;
    height: 82vh; /*正中間不斷打出來的留言的高度(縮小後將移至最頂端)*/
    margin-top: 10vh;
    overflow-y: auto;
}

#chat .innerContainer p.info{
    padding: 10px 20px;
    text-align: center;
    font-size: 10pt;
}

#chat #sendMessage {
    position: absolute;
    bottom: 4px; /*輸入框與整個網頁最底部的距離，倘若此距離提升，將容易導致右邊插入圖片的按鈕於整個網頁瀏覽器縮小時往下掉*/
    width: 49%;
    height: 50px;
}

#chat #sendMessage #messageInput{
    width: 85%; /*輸入灰色框的水平寬度*/
    margin-left: 2%; /*輸入灰色框與左側的距離*/
    /*margin-bottom : 535px; 輸入灰色框與底部的距離-本列似乎無效*/
    padding: 8px; /*輸入灰色框的上下大小*/
    padding-left: 20px; /*輸入灰色框當中的閃爍游標初始位置與灰色框最左側的間距*/
    padding-right: 20px; /*輸入灰色框當中的閃爍游標最末位置與灰色框最右側的間距*/
    border: none;
    border-radius: 20px; /*值為零時=正方形框*/
    background-color: #EEE; /*中間對話視窗最下方之[輸入文字區]之扁橢圓的顏色*/
    font-size:16px; /*中間最下排之輸入灰色框 中的文字大小*/
}

#chat #sendMessage label{
    float: right;
    margin-top: 5px;
    margin-right: 30px;
    cursor: pointer;
}

#chat .innerContainer .row{
    display: block;
    padding: 5px 10%;
}

#chat .innerContainer .recieved p { /*渲染對話視窗中，由[對方]所傳過來之文字的樣式*/
    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;*/ /*本列開啟則可將總整體對話框往左移*/
}

#chat .innerContainer .sent {
    text-align: right; /*我方文字，框中有文字，總整體框靠右\|/20250531B在此將框靠右，內部的標籤再將文字靠左*/
    /*在此調整文字大小無效果*/ font-size: 26px; /*中間最下排之輸入灰色框 中的文字大小*/
}

#chat .innerContainer .sent p{ /*渲染對話視窗中，由[我方]所傳出之文字的樣式*/ /*\|/20250529C將原本的p改成xmp*/
    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; /*我方文字，也就是在框內的文字，水平對齊靠左\|/20250531B之前將框靠右，在此內部的標籤再將文字靠左*/
}
#chat .innerContainer .sent xmp{ /*渲染對話視窗中，由[我方]所傳出之文字的樣式*/ /*\|/20250529C將原本的p改成xmp*/
    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; /*我方文字，也就是在框內的文字，水平對齊靠左\|/20250531B之前將框靠右，在此內部的標籤再將文字靠左*/
    white-space:pre-wrap; word-wrap:break-word; /*\|/20250529C使用xmp就要用此*/
}

#chat .innerContainer img{
    background-color: #f00;
    border-radius: 20px;
    max-width: 80%;
    max-height: 300px;
}

#willyRIGHTtime {
    /*display: block;*/
    padding: 5px 10%; /*這邊要使用 百分比%，才能當瀏覽器水平寬度變化-縮放時，時間與右側框框距離隨之改變++若使用px，則當水平瀏覽器水平寬度變化-縮放時，時間與右側框框距離則保持固定*/
    /*display: inline-block;*/
    /*max-width: 80%;*/
    /*border: 1px solid black;*/ /*★重要-教學用★本列開啟可見方框\|/20250528C*/
    /*padding: 10px;*/
    /*margin: 10px;*/
    /*background-color: yellow;*/
    /*display: inline-block;*/
    /*display: inline-block;*/
    /*padding: 10px 20px;*/
    text-align: right;
    font-size: 16px; /*中間最下排之輸入灰色框 中的文字大小*/
    margin-top: -16px; /*將[總整體方框\|/20250528C]往上移*/
    margin-right: 6px; /*數值越大則[總整體方框\|/20250528C]越靠左*/
}
#willyLEFTtime {

    padding: 5px 10%; /*這邊要使用 百分比%，才能當瀏覽器水平寬度變化-縮放時，時間與右側框框距離隨之改變++若使用px，則當水平瀏覽器水平寬度變化-縮放時，時間與右側框框距離則保持固定*/

    /*border: 1px solid black;*/ /*★重要-教學用★本列開啟可見方框\|/20250528C*/

    text-align: left;
    font-size: 16px; /*中間最下排之輸入灰色框 中的文字大小*/
    margin-top: -16px; /*將[總整體方框\|/20250528C]往上移*/
    margin-left: 6px; /*數值越大則[總整體方框\|/20250528C]越靠左*/
}