@font-face{font-family:"mosfont";src:url("./icons.woff") format('woff');}
.mIcon{font-family:mosfont;}
*{box-sizing:border-box;font-size:var(--fontSize);margin:0px;padding:0px;transition:100ms;color:var(--fg);-webkit-tap-highlight-color:transparent;}

html,body{background:var(--bg_page);}
body{text-align:left;color:var(--fg);margin:auto;}
html,body,input,textarea{font-family:"微软雅黑";}
a{text-decoration:none;color:var(--fg);}
img{-webkit-user-drag:none;}
input,select{outline:0px;height:calc(var(--fontSize)*1.8);vertical-align:middle;padding:0px 4px;}
input{background:var(--white1);color:var(--black1);}
select{background:var(--white);color:var(--black1);}
select>option{background:var(--white);color:var(--black1);}
input,select,textarea{border:1px solid var(--semiFG);outline:none;border-radius:2px;}
:is(input,select,textarea):disabled{background:var(--white);color:var(--semiBG_H);cursor:not-allowed;}
:is(input,select,textarea):focus{border-color:var(--actFG);}
[draggable="true"] {z-index:1;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
input[type="color"]{border:none;padding:0;background:none;outline:none;appearance:none;-webkit-appearance:none;width:50px;height:30px;cursor:pointer;}
.gap{flex-grow:1;}
.btn{margin:0;background:var(--blue);color:var(--white1);padding:4px 8px;cursor:pointer;border-radius:2px;user-select:none;}
.btn:hover{background:var(--blue1);}
.btn:active{transform:scale(0.9);}
img{user-select:none;}

*::-webkit-scrollbar{width:4px;height:4px;}
*::-webkit-scrollbar-track{background:#555;}
*::-webkit-scrollbar-thumb{background:#a5a5a5;border-radius:0px;}
*::-webkit-scrollbar-thumb:hover{background:#ffa500;}
*::-webkit-scrollbar-corner{background:#555;}

*[data-before]::before{content:attr(data-before);}
*[data-after]::after{content:attr(data-after);}
*[data-after=👆]{cursor:pointer;}
*[data-after=👆]:hover{color:var(--actFG);}

#contextmenu{z-index:999998;}
#contextmenu li{padding:4px !important;}
#contextmenu .icon{font-family:mosfont;}
#contextmenu .key, #nav .key{font-size:calc(var(--fontSize)*0.9);font-family:mosfont;}
#effcvs, #cclcvs{position:fixed;left:0px;top:0px;width:100%;height:100%;pointer-events:none;z-index:999999;}

:root{
    --chatW:512px;
    --chatH:800px;
    --chatMargin:80px;
    --msgTxtRound:16px;
    --msgImgRound:50%;
    --peakSize:6px;
    --peakT:0px;
    --msgMarginBtm:8px;
    --msgPadding:4px;
    --bubbleMaxW:100%;
    --bPadT:8px;
    --bPadO:8px;
    --bPadB:8px;
    --bPadI:8px;
    --bgTxtL:#ffffff;
    --fgTxtL:#111111;
    --bgTxtC:#44444400;
    --fgTxtC:#999999;
    --bgTxtR:#9ddeeb;
    --fgTxtR:#111111;
    --fgUserName:#999999;
    --msgFontSize:15px;
    --gapAvatarMsg:10px;
    --fontSize:15px;
    --pd:8px;
    --avatarH:40px;
    --sideW:360px;

    --TH:40px;
    
    --primary:#3498db;
    --white:#dddddd;--white1:#ffffff;--semiWhite:#ffffff77;
    --grey:#ccc;--grey1:#ddd;
    --black:#222222;--black1:#000000;--semiBlack:#00000077;
    --red:#aa0000;--red1:#bb0000;
    --green:#00aa00;--green1:#00bb00;
    --blue:#07f;--blue1:#0099ff;
    --yellow:#ff7b00;--yellow1:#ff9900;
    --brown:#d4be81;

    --bg_page:#262626;
    --chatBg:#ededed;
    --chatBg_hov:#555;
    --chat_fg:#e1e1e1;
    --semiChat_fg:#ccccff22;
    --chat_fg_hov:#ffffff;

    --bgBubbleL:#f1f1f0;
    --fgBubbleL:#000000;

    --bgBubbleR:#dcf8c6;
    --fgBubbleR:#000000;

    --testOpac:#ff000000;

    --boxShadow:0 0px 8px 0 rgba(0, 0, 0, .2);
}

*[data-theme="dark"]{
    --bg_page:#262626;

    --chatBg:#333333;
    --chatBg_hov:#555;
    --chat_fg:#e1e1e1;
    --semiChat_fg:#ccccff22;
    --chat_fg_hov:#ffffff;

    --fg:#cccccc;
    --semiFG_LL:#ffffff11;
    --semiFG_L:#ffffff33;
    --semiFG:#ffffff55;
    --semiFG_H:#ffffff99;
    --actFG:#ffa500;
    --actHovFG:#ffb500;

    --bg:#232323;
    --semiBG_LL:#00000011;
    --semiBG_L:#00000033;
    --semiBG:#00000055;
    --semiBG_H:#00000099;
    --fg_sub:#aaaaaa;
    
    --bg_hov:#434343;

    --fgo1:#ffffff11;--fgo2:#ffffff22;--fgo3:#ffffff33;--fgo4:#ffffff44;
    --bgo1:#00000011;--bgo2:#00000022;--bgo3:#00000033;--bgo4:#00000044;
    --fg_hov0:#ffffff;
    --fg_hov1:#ffa500;
    --fg_hov2:#ce890a;
    --bg_hov0:#000000;
    --bg_hov_grad:linear-gradient(180deg, #ffffff, #ffb700);
    --pnlBorder:var(--semiFG_L);

    --boxBG:var(--semiFG_LL);
    --boxHovBG:var(--bg);
}

*[data-theme="light"]{
    --bg_page:#f4f6f9;

    --chatBg:#ffffff;
    --chatBg_hov:#ddd;
    --chat_fg:#111;
    --semiChat_fg:#00000022;
    --chat_fg_hov:#000;

    --fg:#000000;
    --semiFG_LL:#00000011;
    --semiFG_L:#00000033;
    --semiFG:#00000055;
    --semiFG_H:#00000099;
    --actFG:#07f;
    --actHovFG:#09f;
    --bg:#ffffff;
    --semiBG_LL:#ffffff11;
    --semiBG_L:#ffffff33;
    --semiBG:#ffffff55;
    --semiBG_H:#ffffff99;
    --fg_sub:#aaaaaa;
    
    --bg_hov:#eeeeee;

    --fgo1:#00000011;--fgo2:#00000022;--fgo3:#00000033;--fgo4:#00000044;
    --bgo1:#ffffff11;--bgo2:#ffffff22;--bgo3:#ffffff33;--bgo4:#ffffff44;
    --fg_hov0:#000000;
    --fg_hov1:#ffa500;
    --fg_hov2:#ce890a;
    --bg_hov0:#ffffff;
    --bg_hov_grad:linear-gradient(180deg, #ffffff, #ffb700);
    --pnlBorder:#0000;

    --boxBG:var(--bg);
    --boxHovBG:var(--semiBG_H);
}
body,html{width:100vw;height:100vh;margin:0}

body{font-family:Arial,sans-serif;display:flex;flex-direction:column;}
#T{height:var(--TH);display:flex;align-items:center;padding:0px 8px;gap:4px;border-bottom:1px solid var(--semiFG_L);background:var(--bg);-webkit-app-region:drag;}
#T *{user-select:none;-webkit-app-region:no-drag;}
#T>.logo{background-image:url('../img/logo256.webp');width:22px;height:22px;background-size:cover;}
#T>.ttl{font-weight:bold;}
#T>.ttl:hover{color:var(--actFG);}
#T>.filename{padding:2px 0px 2px 0px;border-bottom:1px solid;}
#T>.filename:empty{padding:0;border:none;}
body[data-unsaved=true] #T>.filename::after{content:'●';margin-left:calc(var(--fontSize) * 0.5);color:var(--actFG);}
#M{height:calc(100vh - var(--TH));display:flex;justify-content:center;align-items:center;}
.chatCtnr{flex:1;height:100%;display:flex;justify-content:center;align-items:center;position:relative;}
.chatCtnr[data-instant="1"]{background-image:radial-gradient(circle, var(--semiFG) 1px, transparent 1px);background-size:32px 32px;}
.chatCtnr[data-instant="0"] #DP{display:none;}
.chatCtnr::after{position:absolute;top:calc(var(--fontSize) * 0.5);right:calc(var(--fontSize) * 0.5);}

#CHAT{max-width:calc(100vw - var(--sideW)*2);width:var(--chatW);max-height:calc(100vh - var(--chatMargin));height:var(--chatH);-webkit-app-region:no-drag;}
:is(#CHAT, .msgCtnr){border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:20px;overflow:auto;background:var(--chatBg);transition:none;}
body.instant :is(#CHAT, .msgCtnr){overflow-y:scroll;border-radius:0px;}
:is(#CHAT, .msgCtnr)>.msg{display:flex;align-items:flex-start;gap:var(--gapAvatarMsg);transform:scale(1);opacity:1;padding:var(--msgPadding);position:relative;transition:none;}
:is(#CHAT, .msgCtnr)>.msg:not(:last-child){margin-bottom:calc(var(--msgMarginBtm) + var(--msgFontSize));}
:is(#CHAT, .msgCtnr)>.msg.tarCancelMsg{background:#09f9;border-radius:2px;}
body.instant :is(#CHAT, .msgCtnr)>.msg::before{position:absolute;top:calc(var(--fontSize) * -0.8);font-size:calc(var(--fontSize) * 0.8);}
body.instant :is(#CHAT, .msgCtnr)>.msg.C::before{left:50%;transform:translateX(-50%);}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"]::before {content:"🎨";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-wait="true"]::before {content:"⌛";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-cancel="true"]::before {content:"↩️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-animShow="true"]::before {content:"▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-wait="true"]::before {content:"🎨⌛";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-wait="true"][data-cancel="true"]::before {content:"⌛↩️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-cancel="true"]::before {content:"🎨↩️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-animShow="true"]::before {content:"🎨▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-wait="true"][data-animShow="true"]::before {content:"⌛▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-cancel="true"][data-animShow="true"]::before {content:"↩️▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-wait="true"][data-cancel="true"]::before {content:"🎨⌛↩️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-wait="true"][data-animShow="true"]::before {content:"🎨⌛▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-cancel="true"][data-animShow="true"]::before {content:"🎨↩️▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-wait="true"][data-cancel="true"][data-animShow="true"]::before {content:"⌛↩️▶️";}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-col="true"][data-wait="true"][data-cancel="true"][data-animShow="true"]::before {content:"🎨⌛↩️▶️";}

body.instant :is(#CHAT, .msgCtnr)>.msg:hover{background-image:repeating-linear-gradient(135deg,var(--semiFG_LL) 0 2px,var(--semiFG_LL) 4px 6px,transparent 6px 12px);border-radius:4px;}
body.instant :is(#CHAT, .msgCtnr)>.msg.sel{background-image:repeating-linear-gradient(135deg,var(--semiFG_LL) 0 2px,var(--semiFG_LL) 4px 6px,transparent 6px 12px);outline:none;box-shadow:var(--boxShadow);}
body.instant :is(#CHAT, .msgCtnr)>.msg.sel::after{content:' ';position:absolute;background:linear-gradient(to right, var(--actHovFG) 0, var(--actHovFG) calc(var(--fontSize) * 0.2), transparent calc(var(--fontSize) * 0.2), transparent calc(100% - var(--fontSize) * 0.2), var(--actHovFG) calc(100% - var(--fontSize) * 0.2), var(--actHovFG) 100%);width:calc(100% + var(--fontSize) * 0.4);height:100%;left:calc(var(--fontSize) * -0.2);top:0;pointer-events:none;}
:is(#CHAT, .msgCtnr)>.msg>.avatar{width:var(--avatarH);height:var(--avatarH);border-radius:var(--msgImgRound);object-fit:cover;transition:none;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt{display:flex;flex-direction:column;max-width:calc(var(--bubbleMaxW) - 100px);}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt{align-items:end;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble{word-wrap:break-word;border-radius:var(--msgTxtRound);border:1px solid transparent;position:relative;transition:none;background-repeat:no-repeat;}
:is(#CHAT, .msgCtnr)>.msg.L>.ctnt>.bubble{padding:var(--bPadT) var(--bPadO) var(--bPadB) var(--bPadI);}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble{padding:var(--bPadT) var(--bPadI) var(--bPadB) var(--bPadO);}
:is(#CHAT, .msgCtnr)>.msg:not([data-bubbleBg="null"])>.ctnt>.bubble{background-color:transparent !important;border-radius:0;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt{font-family:mainfont;}
body.instant :is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt{white-space:pre-wrap;font-size:var(--msgFontSize);}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>:is(.txt, .cimg){display:none;}
:is(#CHAT, .msgCtnr)>.msg[data-type=text]>.ctnt>.bubble>.txt, :is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble:has(.waiting)>.txt{display:block;}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble{cursor:pointer;}
:is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble{background-image:none !important;padding:0 !important;}
/* body.instant :is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble::after{content:'替换';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--semiFG_H);color:var(--bg);border-radius:4px;padding:0px 4px;pointer-events:none;}
body.instant :is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble:hover::after{background:var(--fg);} */
:is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble:not(:has(.waiting)){padding:0px;border:none;background-color:transparent !important;}
:is(#CHAT, .msgCtnr)>.msg[data-type=img]>.ctnt>.bubble>.cimg{display:block;border-radius:var(--msgTxtRound);}
:is(#CHAT, .msgCtnr)>.msg:not([data-type=img])>.ctnt>.bubble>.cimg{display:none;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble:has(.waiting)>*:not(.txt){display:none;}
:is(#CHAT, .msgCtnr)>.msg:not([data-type=audio])>.ctnt>.bubble>.caudio{display:none;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt{max-width:none;text-align:center;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.bubble>:is(.cimg, .caudio){display:none;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.caudio{color:inherit;display:flex;gap:4px;align-items:center;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble>.caudio{justify-content:right;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.caudio>.dur{color:inherit;font-size:var(--msgFontSize);font-family:mainfont;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.caudio>.dur::after{content:'"';}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.caudio>img{height:calc(var(--msgFontSize)*1);margin:3px 0px;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble>.caudio>img{transform:rotate(180deg);}

:is(#CHAT, .msgCtnr)>.msg[data-refused="true"]:not(.C)>.ctnt>.bubble:not(*:has(.waiting)):after{content:'!';background:red;color:#fff;display:flex;font-size:var(--msgFontSize);width:calc(var(--msgFontSize) * 1.2);height:calc(var(--msgFontSize) * 1.2);justify-content:center;align-items:center;border-radius:50%;position:absolute;right:calc(var(--msgFontSize) * -1.6);top:50%;transform:translateY(-50%);}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.bubble::after{display:none;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble::after{right:auto;left:calc(var(--msgFontSize) * -1.6);}

:is(#CHAT, .msgCtnr)>.msg[data-showAvatar="false"]>.avatar{display:none;}

:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt{color:inherit;text-align:left;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt:focus, :is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt:focus::before{border:1px solid var(--semiFG);}
:is(#CHAT, .msgCtnr)>.msg[data-hasPeak=true]:not(.C, [data-type=img], :not([data-bubbleBg="null"]))>.ctnt>.bubble::before{content:' ';display:block;position:absolute;width:var(--peakSize);height:var(--peakSize);top:calc((var(--avatarH) - var(--peakSize)*1.44) * 0.5 + var(--peakT));border:inherit;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.bubble>.txt:focus{outline:none;border:none;}
:is(#CHAT, .msgCtnr)>.msg>.ctnt>.waiting{color:#999;}
:is(#CHAT, .msgCtnr)>.msg.C{justify-content:center;transform:scale(1);opacity:1;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt{display:inline;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.bubble{background-color:var(--bgTxtC);color:var(--fgTxtC);display:inline;padding:0;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.bubble>.txt{text-align:center;display:inline;}
:is(#CHAT, .msgCtnr)>.msg.C>.avatar{display:none;}
:is(#CHAT, .msgCtnr)>.msg.R{justify-content:flex-end;transform-origin:right bottom;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble{background-color:var(--bgTxtR);color:var(--fgTxtR);}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.bubble::before{background-color:inherit;right:calc(var(--peakSize) * -0.66);transform:rotate(45deg);border-width:1px 1px 0px 0px;}
:is(#CHAT, .msgCtnr)>.msg.L{transform-origin:left bottom;}
:is(#CHAT, .msgCtnr)>.msg.L>.ctnt>.bubble{background-color:var(--bgTxtL);color:var(--fgTxtL);}
:is(#CHAT, .msgCtnr)>.msg.L>.ctnt>.bubble::before{background-color:inherit;left:calc(var(--peakSize) * -0.66);transform:rotate(45deg);border-width:0px 0px 1px 1px;}

:is(#CHAT, .msgCtnr)>.msg>.ctnt>.userName{color:var(--fgUserName);margin-bottom:calc(var(--fontSize) * 0.25);display:none;}
:is(#CHAT, .msgCtnr)>.msg[data-showusername="true"]>.ctnt>.userName{display:block;}
:is(#CHAT, .msgCtnr)>.msg.L>.ctnt>.userName{text-align:left;transform-origin:left bottom;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.userName{text-align:right;user-select:none;transform-origin:right bottom;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.userName{display:none;}
:is(#CHAT, .msgCtnr)::-webkit-scrollbar{width:0px;height:0px;}
body.instant :is(#CHAT, .msgCtnr)::-webkit-scrollbar{width:4px;height:4px;}

:is(#CHAT, .msgCtnr)>.msg>.ctnt>.stat{display:none;}
:is(#CHAT, .msgCtnr)>.msg.C>.ctnt>.stat{font-size:calc(var(--fontSize) * 0.86);}
:is(#CHAT, .msgCtnr)>.msg[data-showStat="true"]>.ctnt>.stat{display:flex;}
:is(#CHAT, .msgCtnr)>.msg[data-showStat="true"]:not(.C)>.ctnt>.stat{position:absolute;bottom:calc(var(--msgFontSize) * -1);}
:is(#CHAT, .msgCtnr)>.msg.C[data-showStat="true"]>.ctnt>.stat{display:inline;}
:is(#CHAT, .msgCtnr)>.msg.L>.ctnt>.stat{justify-content:right;transform-origin:left top;}
:is(#CHAT, .msgCtnr)>.msg.R>.ctnt>.stat{justify-content:right;transform-origin:right top;}


.mod_keys{position:fixed;left:4px;bottom:4px;display:flex;gap:8px;z-index:99;}
.mod_key{height:20px;line-height:20px;padding:0px 4px;color:var(--semiFG);user-select:none;cursor:pointer;}
.mod_key.sel{background:var(--bg);color:var(--fg);}

#SET{height:100%;transition:0.2s;display:flex;align-items:center;position:relative;}
#SET *{white-space:nowrap;}
#SET>.h{width:24px;height:40px;background:#bbb;transition:none;cursor:pointer;user-select:none;font-size:calc(var(--fontSize)*2);color:#666;border-radius:4px 0px 0px 4px;overflow:hidden;position:absolute;left:-24px;z-index:10;}
#SET>.h::after{content:'▸';}
#SET>.c{width:var(--sideW);height:100%;background:var(--bg);padding:8px;border-left:1px solid var(--semiFG_L);transition:200ms;overflow:auto;}
*[data-theme="light"] #SET>.c{box-shadow:var(--boxShadow);border-color:transparent;}
#SET.fold>.h{position:fixed;right:0;left:auto;}
#SET.fold>.h::after{content:'◂';}
#SET.fold>.c{width:0vw;padding:0px;overflow:hidden;}

#SET>.c>.seg:last-child{border-bottom:1px dashed var(--semiFG);}
#SET>.c>.seg>.ttl{text-align:left;font-weight:bold;padding:4px 8px;background:var(--semiFG);cursor:pointer;border-bottom:1px solid var(--semiFG_L);user-select:none;border-radius:2px;}
#SET>.c>.seg>.ttl:hover{background:var(--semiFG_L);color:var(--actFG);}
#SET>.c>.seg>.ctnt{padding:5px 20px;border:1px dashed var(--semiFG);border-width:0px 1px;display:flex;flex-direction:column;gap:4px;transition:none;}
#SET>.c .row{display:flex;align-items:center;gap:8px;height:calc(var(--fontSize)*2);}
#SET>.c .row>.intr{flex-basis:calc(var(--fontSize)*8);text-align:right;white-space:nowrap;user-select:none;font-weight:bold;}
#SET>.c .row input[type=range]{flex-grow:1;}
#SET>.c .row .divCol{min-width:calc(var(--fontSize)*3);min-height:calc(var(--fontSize)*1.25);border:1px solid var(--semiFG_H);}
#SET>.c .row .path{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--semiBG_H);padding:0px 6px;border-radius:2px;cursor:pointer;flex-grow:1;text-align:left;border:1px solid var(--semiFG_L);min-height:calc(var(--fontSize)*1.5);}
#SET>.c .row .path:hover{background:var(--semiBG);border-color:var(--semiFG);}
#SET>.c .row>.c{display:flex;gap:4px;align-items:center;}
#SET>.c .row>.c>label{user-select:none;}
#SET>.c>.divBtns{margin:0px 0px 8px 0px;}
#SET>.c>.divBtns::before{content:attr(data-ttl);background:var(--semiFG_LL);display:flex;padding:4px;}
#SET>.c>.divBtns>.ctnt{display:flex;flex-wrap:wrap;gap:8px;padding:4px;}

#DPC{height:100%;transition:0.2s;display:flex;align-items:center;position:relative;}
#DPC *{white-space:nowrap;}
#DPC>.h{width:24px;height:40px;background:#bbb;transition:none;cursor:pointer;user-select:none;font-size:calc(var(--fontSize)*2);color:#666;border-radius:0px 4px 4px 0px;overflow:hidden;position:absolute;right:-24px;z-index:10;}
#DPC>.h::after{content:'◂';}
#DPC>.c{width:var(--sideW);height:100%;background:var(--bg);border-right:1px solid var(--semiFG_L);transition:200ms;overflow:auto;}
*[data-theme="light"] #SET>.c{box-shadow:var(--boxShadow);border-color:transparent;}
#DPC.fold>.h{position:fixed;left:0;right:auto;}
#DPC.fold>.h::after{content:'▸';}
#DPC.fold>.c{width:0vw;padding:0px;overflow:hidden;}

body .btn.account{display:none;background:none;}
body[data-login="true"] .btn:is(.register, .login){display:none;}
body #T .btn.register{display:none;}
body[data-login="true"] .btn:is(.account){display:block;}

@keyframes pop-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}


.btn.delete{background:var(--red);}
.btn.delete:hover{background:var(--red1);}
.btn:is(.reset, .applyAll, .resetChat){background:var(--green);}
.btn:is(.reset, .applyAll, .resetChat):hover{background:var(--green1);}


#DP{background:var(--bg);width:100%;height:100%;overflow:auto;padding:8px;max-height:calc(100% - var(--TH));}
#DP *:not(input){user-select:none;}
#DP :is(.i, label){user-select:none;}
#DP>*:not(:last-child){margin-bottom:4px;}
#DP .tc>.ctnt{display:none;}
#DP .tc>.ttl:has(input:checked) ~ .ctnt{display:block;}
#DP .DpSeled{color:var(--actFG);font-weight:bold;margin:0px 4px;}
#DP .row{display:flex;gap:4px;align-items:center;width:100%;margin-bottom:8px;height:calc(var(--fontSize)*2);}
#DP .row>.i{font-weight:bold;padding-left:4px;}
#DP .row>.c{flex:1;display:flex;align-items:center;gap:4px;align-items:center;}
#DP .row>.c>*:not(.num, label, input[type="checkbox"], input[type="color"]){flex:1;}
#DP .row>.c>input[type="color"]{margin-right:8px;}
#DP .row>.c>.btn{text-align:center;}
#DP>.tc>.ttl>.row{background:var(--semiFG_L);border-bottom:1px solid var(--semiFG_L);border-radius:2px;}
#DP>.tc>.ctnt{padding-left:16px;border-left:1px dashed var(--semiFG);}
#DP .btn.sel{background-color:var(--actFG);color:var(--black1);}
#DP .btn.sel:hover{background-color:var(--actHovFG);}
#DP .row[data-k=imgW]{display:none;}
#DP .row:has(.btn.img.sel) ~ .row[data-k=imgW]{display:flex;}
#DP .row[data-k=audioDur]{display:none;}
#DP .row:has(.btn.audio.sel) ~ .row.audioDur{display:flex;}
#DP .row:has(.btn.C.sel) ~ :is(.row:is(.showAvatar, .refused, .hasPeak, .subTxtGap, .gapAvatarMsg), .tc:is(.showUserName, .bPad)){display:none;}
#DP .row:has(.btn.img.sel) ~ :is(.row:is(.fontSizeScale), .tc:is(.col, .bPad)){display:none;}
#DP .row.btns>.gap{border-top:1px dashed var(--semiFG_L);}
#DP .row.cancelHash>.c>input{display:none;}
#DP .row.cancelHash>.c>.btn.cancelHash{max-width:50%;flex:none;padding:4px 16px;}


#nav{display:block !important;margin-left:8px !important;-webkit-app-region:no-drag;z-index:999;}
#nav .icon{font-family:mosfont;}
#nav *{font-size:var(--fontSize) !important;-webkit-app-region:no-drag;}
#nav>li{background:var(--bg) !important;margin-right:2px !important;}
#nav>li:first-child{margin-left:2px !important;}
#nav>li:hover, #nav>.prnt.open{background:var(--bg_hov) !important;}
#nav>li>a{padding:0px 8px;}
#nav>li>.widthGap{display:none;}
#nav>li>ul{margin-top:-1px;}
#nav .chld li:not(.line){padding:4px 8px !important;}
#nav .key{font-size:calc(var(--fontSize)*0.9);font-family:mosfont;}

body #nav-play{background:var(--blue) !important;border-radius:calc(var(--fontSize) * 0.2) !important;}
body #nav-play>a{color:var(--white1) !important;}
body #nav-play:hover{background:var(--blue1) !important;}
body:not(.instant) #nav-play{background:var(--red) !important;}
body:not(.instant) #nav-play>a{color:var(--white1) !important;}
body:not(.instant) :is(#DPC, #SET){display:none;}
body:not(.instant) .chatCtnr{-webkit-app-region:drag;}

.tcs .msg{cursor:url(../img/cursor_pickchat.png), crosshair !important;}
.tcs :not(.msg){cursor:not-allowed !important;}
body.tcs .msg:hover{box-shadow:0 0px 8px 0 rgba(0, 0, 0, .4);}
body.tcs .msg *{pointer-events:none;}
body.tcs *:not(*:has(#CHAT), #CHAT, #CHAT *){opacity:0;pointer-events:none;}
body.tcs .chatCtnr{background:none;}

#T>.btns{display:none;gap: 0px;height: 100%;align-items: center;}
.electron #T{padding:0px 0px 0px 8px;}
.electron #T>.btns{display:flex;}
.topbtn{color:var(--colFG);-webkit-app-region:no-drag !important;width:calc(var(--TH) - 12px);text-align:center;height:var(--TH);line-height:var(--TH);cursor:pointer;z-index:996;font-family:mosfont;font-size:calc(var(--TH) - 28px);}
.topbtn:hover{background:var(--semiFG_LL);}
.topbtn:active{font-size:calc(var(--TH) - 30px);}
#winClose{right:var(--frame);}
#winClose:hover{background:#da2121;}
#winClose:active{background:#a11818;}
#winMax{right:calc(var(--frame) + var(--TH));}
#winMin{right:calc(var(--frame) + var(--bBarH)*2);}