.view h1:focus{outline:none}
.chat-page{padding:12px 17px 0;height:var(--chat-visible-height,calc(100svh - var(--nav-height) - env(safe-area-inset-bottom)));background:var(--paper)}
.chat-page:before{width:160px;height:330px;left:-124px;right:auto;top:175px;border:0;border-right:.6px solid #b4bac3;transform:rotate(-12deg)}
.chat-page:after{width:175px;height:138px;left:auto;right:-120px;bottom:60px;border:.6px solid #b4bac3}
.romance-header{position:relative;display:block;flex-shrink:0;height:113px;padding:0;border-bottom:0}
.icon-button{display:grid;place-items:center;width:34px;height:38px;padding:8px;color:var(--ink);flex-shrink:0}
.icon-button svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
#profile-more svg{stroke:none;fill:currentColor}
.chat-back{position:absolute;left:-8px;top:15px}
.header-tools{position:absolute;right:-7px;top:15px;display:flex;gap:0}
.contact-identity{position:absolute;left:50%;top:3px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;padding:0;min-width:90px}
.portrait-orbit{position:relative;display:block;width:43px;height:43px;margin-bottom:5px}
.portrait-orbit img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.portrait-orbit:before{content:'';position:absolute;inset:-4px;border:.65px solid var(--blue);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(14deg)}
.portrait-orbit:after{content:'';position:absolute;width:3px;height:3px;right:-4px;top:23px;border-radius:50%;background:var(--blue)}
.contact-title{text-align:center}
.contact-title h1{font-size:max(8px, round(nearest, calc((21px) * var(--type-scale, 1)), 4px))!important;line-height:1.05;font-weight:400;letter-spacing:-.02em;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-title small{display:block;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));margin-top:3px;color:#676c69;letter-spacing:.12em}
.talk-secondary{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 1px 6px;min-height:21px}
.talk-secondary>span{font-size:max(8px, round(nearest, calc((8px) * var(--type-scale, 1)), 4px));letter-spacing:.14em;color:#8b908a}
.talk-secondary #demo-toggle{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));padding:5px 0;color:#6c716c}
.talk-secondary #demo-toggle[aria-pressed=true]{color:var(--blue)}
.chat-toolbar{margin:0 0 6px}
.search-box{border-color:#c7cac4;border-radius:3px;background:transparent;height:34px}
.small-text-button{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));padding:10px 3px}
.chat-stream{padding:0 0 12px;scrollbar-width:none;scrollbar-gutter:auto}
.chat-stream::-webkit-scrollbar{display:none}
.stream-label{margin:3px 0 18px;font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));gap:12px;color:#6c7269}
.stream-label:before,.stream-label:after{max-width:26px}
.messages{gap:var(--message-gap)}
.message{width:100%!important;display:flex;align-items:flex-start;gap:8px}
.message.outgoing{flex-direction:row-reverse}
.message-avatar{width:28px;height:28px;flex-shrink:0;border-radius:50%;object-fit:cover;margin-top:1px;border:.6px solid #d6d8d0}
.message-content{max-width:calc(100% - 72px);width:max-content;min-width:38px}
.message-bubble{width:fit-content;border:.65px solid #dfe1dc;background:#fafaf7;border-radius:3px 11px 11px 11px;padding:var(--bubble-pad)}
.message-bubble:before{width:5px;height:5px;border-color:#a3a7a0;border-radius:2px 0 0}
.outgoing .message-bubble{background:#e8ebf3;border:0;border-radius:11px 3px 11px 11px}
.outgoing .message-bubble:before{width:5px;height:5px;border-color:#9ba9d3;opacity:.7}
.message-bubble p{font-size:max(8px, round(nearest, calc((var(--chat-font)) * var(--type-scale, 1)), 4px));line-height:var(--chat-leading)}
.message-meta{margin:3px 1px 0;min-height:12px;font-size:max(8px, round(nearest, calc((8px) * var(--type-scale, 1)), 4px));gap:14px;color:#7c817b}
.outgoing .message-meta{justify-content:flex-end}
.message-more{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));letter-spacing:.03em;line-height:1;padding:0 4px;min-width:22px;height:18px;color:#7a8078;opacity:.5}
.message-more:hover,.message-more:focus-visible{opacity:1;color:var(--blue)}
.message.is-followup{margin-top:-7px}
.message.is-followup .message-avatar{opacity:.68}
.message-empty{padding:65px 15px;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
.message-empty em{font-size:max(8px, round(nearest, calc((17px) * var(--type-scale, 1)), 4px));line-height:1.5}
.romance-composer{padding:8px 0 5px;border:0;background:var(--paper)}
.composer-rail{display:flex;gap:7px;align-items:flex-end;border:.6px solid #d6d9d4;border-radius:25px;padding:4px 5px 4px 1px;background:#fafaf7}
.composer-rail>.icon-button{width:32px;height:38px;padding:8px 5px 8px 9px;color:#62685f}
.composer-rail textarea{border:0!important;outline:none!important;box-shadow:none;min-height:40px;max-height:110px;padding:10px 4px;font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));line-height:1.5;background:transparent;flex:1;min-width:0;overflow-y:auto;resize:none}
.composer-rail:focus-within{border-color:#939fc0}
.composer-rail .send-button{width:33px;height:33px;margin:3px 1px 3px 0;padding:8px;border-radius:50%;background:var(--blue)}
.composer-caption{display:flex;justify-content:space-between;gap:12px;padding:5px 7px 0;min-height:17px;font-size:max(8px, round(nearest, calc((8px) * var(--type-scale, 1)), 4px));color:#777d73}
.composer-caption #message-count{opacity:.65}
#composer-extras{position:absolute;left:0;bottom:77px;display:flex;flex-direction:column;background:var(--paper);border:.7px solid #c9cec2;min-width:142px;padding:6px 12px;z-index:5}
#composer-extras button{text-align:left;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));padding:12px 2px;border-bottom:.5px solid #dde1d8}
#composer-extras button:last-child{border-bottom:0}
.profile-setting-link{width:100%;display:flex;gap:11px;align-items:center;text-align:left;padding:5px 0 17px;font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px))}
.profile-setting-link>span:last-child{margin-left:auto;color:var(--blue)}
.profile-setting-link small{display:block;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#6b7362;margin-top:5px}
.avatar-pair{display:flex;align-items:center;padding-right:6px}
.avatar-pair img{width:27px;height:27px;border-radius:50%;object-fit:cover;border:2px solid var(--paper)}
.avatar-pair img+img{margin-left:-7px}
.profile-dialog{padding:30px 25px 23px;max-height:calc(100svh - 40px);overflow:auto}
.profile-close{position:absolute;right:8px;top:8px}
.dialog-index{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));letter-spacing:.13em;margin-bottom:22px;color:#737a6b}
.profile-dialog h2{font-family:Georgia,SimSun,serif;font-size:max(8px, round(nearest, calc((23px) * var(--type-scale, 1)), 4px));line-height:1.4;margin-bottom:25px}
.profile-person{display:flex;gap:18px;align-items:center;padding:18px 0;border-top:.6px solid #cbd0c4}
.avatar-upload{width:56px;height:72px;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:var(--blue);flex-shrink:0}
.avatar-upload img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.avatar-upload:focus-within{outline:1px solid var(--blue);outline-offset:3px}
.profile-person>div{flex:1;min-width:0}
.profile-person>div>label{display:block;font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));margin-bottom:7px}
.profile-person input[type=text],.profile-person input:not([type]){width:100%;border:0;border-bottom:.7px solid #9ea797;background:transparent;padding:5px 0;font:inherit;font-size:max(8px, round(nearest, calc((17px) * var(--type-scale, 1)), 4px));border-radius:0}
.reset-avatar{display:block;font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:#717967;padding:6px 0}
#profile-status{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));line-height:1.7;color:#68735d;margin:13px 0}
.profile-save{display:flex;justify-content:space-between;width:100%;font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));border-top:.7px solid var(--ink);padding:15px 0 2px;color:var(--blue)}
.message-menu{max-width:calc(100% - 40px);width:250px;padding:18px 20px}
.message-menu p{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#767f6a;border-bottom:.5px solid #c9d0c0;padding-bottom:12px;margin-bottom:4px}
.message-menu button{display:block;width:100%;text-align:left;font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));padding:13px 2px}
.message-menu button:last-child{color:#777e6e;border-top:.5px solid #c9d0c0;margin-top:5px;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
body.chat-keyboard[data-page=talk] .bottom-nav{display:none}
@media(min-width:700px){.chat-page{height:var(--chat-visible-height,calc(100svh - 24px - var(--nav-height)))}.romance-header{height:113px}}
@media(max-width:350px){.chat-page{padding-left:13px;padding-right:13px}.message-content{max-width:calc(100% - 63px)}.message-avatar{width:26px;height:26px}.header-tools .icon-button{width:28px}.romance-header{height:108px}}