body.is-together-messages{overflow:hidden;background:#eee5df}
.is-together-messages .site-header{display:none}
.is-together-messages #main{height:100svh;min-height:0;overflow:clip}
.together-page{height:100svh;display:grid;grid-template-rows:1fr 3fr;overflow:clip;position:relative;isolation:isolate;color:#5d4a52}
.together-rooms{min-height:0;display:grid;grid-template-columns:1fr 1fr;border-bottom:3px solid #332a30;overflow:clip}
.together-room{position:relative;min-width:0;min-height:0;background-size:cover;background-repeat:no-repeat;image-rendering:pixelated}
.girl-room{background-color:#dfb4bd;background-image:url('/scene/message-girl-room-v1.webp');background-position:right center;border-right:3px solid #211b24}
.boy-room{background-color:#95b0cb;background-image:url('/scene/message-boy-room-v2.webp');background-position:12% center}
.together-back{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(13px,env(safe-area-inset-top));width:38px;height:38px;display:grid;place-items:center;border:2px solid #fff0eb;background:#fff4f0e8;border-radius:11px;color:#ac5c77;box-shadow:0 3px 0 #66445740;z-index:6}
.together-back svg{width:21px;height:21px;fill:currentColor;shape-rendering:crispEdges}
.together-conversation{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(ellipse at 0 0,#f5dce2bb,transparent 70%),radial-gradient(ellipse at 100% 80%,#dbe6f3c9,transparent 70%),repeating-linear-gradient(0deg,transparent 0 31px,#bfa9af10 31px 32px),#f7f0e9;overflow:clip}
.messages-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px clamp(16px,4vw,52px);border-bottom:1px solid #c6a9ae44;background:#fff5ed66}
.messages-toolbar>div{display:flex;align-items:baseline;min-width:0;gap:12px}
.messages-toolbar time{font-size:11px;color:#927b83;white-space:nowrap}
.messages-toolbar h1{font:600 13px/1.4 var(--font);margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.4px}
.message-refresh{width:30px;height:30px;display:grid;place-items:center;flex:none;padding:5px;color:#8c7b8e;background:#fff5efb8;border:1px solid #d3bfc766;border-radius:8px}
.message-refresh svg{width:18px;height:18px}
.messages-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cfb4c0 transparent;padding:22px clamp(15px,4vw,52px) 26px}
.together-posts{max-width:1120px;margin:0 auto}
.together-post{display:flex;align-items:flex-start;gap:12px;margin:0 0 23px}
.together-post.is-boy{flex-direction:row-reverse}
.together-post.is-unknown{justify-content:center}
.message-avatar{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:3px;overflow:hidden;border:2px solid #f4c5d3;background:#fae5e8;border-radius:10px;box-shadow:0 2px 0 #bd8d9d36;color:#a46b80;font-size:16px}
.message-avatar img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;image-rendering:pixelated}
.message-avatar.avatar-boy img{transform:scaleX(-1)}
.message-avatar.avatar-boy{background:#e1eaf6;border-color:#b9d0e8;color:#567fa0;box-shadow:0 2px 0 #819fb63b}
.message-avatar.avatar-unknown{background:#ece8e1;border-color:#d2c9bd}
.message-post-content{width:min(73%,620px);min-width:0;border:1px solid #e3b5c2;border-radius:3px 14px 14px 14px;background:#fff0f3;box-shadow:0 3px 0 #b98f9c1c;padding:11px 15px 13px}
.is-boy .message-post-content{background:#edf4fc;border-color:#bbcee2;border-radius:14px 3px 14px 14px;box-shadow:0 3px 0 #8197b21f}
.is-unknown .message-post-content{background:#fff9ef;border-color:#d8ccb7}
.message-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:22px;margin-bottom:5px;color:#8e5970}
.message-post-meta>b{font-size:12px;font-weight:600}
.message-post-meta time{font-size:10px;color:#a08b93}
.is-boy .message-post-meta{color:#577799}
.is-boy .message-post-meta time{color:#8498ad}
.message-edit-icon{width:25px;height:25px;padding:4px;display:grid;place-items:center;margin-left:auto;color:inherit;border:0;border-radius:6px;background:transparent}
.message-edit-icon svg{width:16px;height:16px}
.message-edit-icon:hover{background:#c2abc42c}
.message-note-actions{display:flex;align-items:center;gap:3px;margin-left:auto;flex:none}
.message-note-actions .message-edit-icon{margin-left:0}
.message-delete-icon{width:28px;height:28px;padding:5px;display:grid;place-items:center;color:#ad7188;border:0;border-radius:7px;background:transparent}
.message-delete-icon svg{width:17px;height:17px}
.message-delete-icon:hover{background:#f4d4df}
.is-boy .message-delete-icon{color:#7b91ac}.is-boy .message-delete-icon:hover{background:#dbe6f4}
.message-preview{display:block;text-align:left;width:100%;min-height:42px;padding:0;background:transparent;border:0;color:#5d4a52}
.message-preview p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.85;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.message-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:330px;margin-top:8px}
.message-photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid #fff9f4;border-radius:5px}
.message-photo-grid img:only-child{grid-column:span 2;max-height:190px;aspect-ratio:4/3}
.full-note-images{display:grid;gap:12px;margin-top:18px}
.full-note-images:empty{display:none}
.full-note-images img{display:block;width:100%;height:auto;border:3px solid #fffaf5;border-radius:6px;box-shadow:0 2px 8px #69556318}
.composer-photos{display:flex;gap:8px;overflow:auto;padding:8px 0 5px;max-width:100%}
.composer-photos[hidden]{display:none}
.composer-photo{position:relative;flex:0 0 60px;height:60px}
.composer-photo img{display:block;width:100%;height:100%;object-fit:cover;border:2px solid #e4becd;border-radius:7px}
.composer-photo button{position:absolute;right:-3px;top:-4px;width:26px;height:26px;display:grid;place-items:center;background:#fff6fa;color:#a55a7a;border:1px solid #d7b6c7;border-radius:50%;padding:3px}
.composer-photo button svg{width:16px;height:16px}
.composer-actions{display:flex;gap:7px;align-items:center;flex:none;margin-bottom:16px}
.composer-actions .message-send{margin:0}
.message-add-photo{display:grid;place-items:center;width:43px;height:43px;padding:9px;border:2px solid #e6b9cb;border-radius:11px;background:#fff2f7;color:#a96784;box-shadow:0 3px 0 #b7789326}
.message-add-photo svg{width:22px;height:22px;shape-rendering:crispEdges}
.is-boy .message-add-photo{border-color:#bdcfe2;background:#f1f6fe;color:#6689b1}
.message-add-photo:hover{background:#ffe2ed}
.is-boy .message-add-photo:hover{background:#dfeafb}
.together-composer[aria-busy="true"] button{opacity:.5;cursor:progress}
.message-read-more{display:block;color:#a67c96;font-size:11px;margin-top:7px}
.is-boy .message-read-more{color:#6c88a9}
.messages-empty{text-align:center;padding:48px 20px;color:#aa8f9b;font-size:13px}
.together-composer{display:flex;align-items:flex-end;gap:12px;padding:12px clamp(16px,4vw,52px) max(12px,env(safe-area-inset-bottom));border-top:1px solid #d4c0c4;background:#fff4edea;box-shadow:0 -5px 20px #92758b08}
.together-composer>.message-avatar{width:42px;height:42px;flex-basis:42px;margin-bottom:5px;cursor:pointer}
.composer-input{flex:1;min-width:0}
.together-composer textarea{display:block;width:100%;resize:none;min-height:54px;max-height:112px;margin:0;border:1px solid #dcb8c6;border-radius:10px;padding:10px 13px;background:#fffaf7;color:#654d5a;font:13px/1.5 var(--font)}
.together-composer.is-boy textarea{border-color:#b8ccdf;background:#f8fbff}
.together-composer textarea::placeholder{color:#b09ba5}
.composer-draft-row{min-height:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.composer-draft-row .draft-state{font-size:10px;line-height:1.3;color:#a48f9b}
.composer-draft-row #cancel-edit{padding:0;border:0;background:transparent;color:#aa6a83;font-size:10px;line-height:1.3}
.message-send{width:43px;height:43px;margin-bottom:16px;display:grid;place-items:center;flex:none;padding:9px;border:2px solid #ffe6ec;border-radius:11px;background:#dc9eb7;color:#fff8fb;box-shadow:0 3px 0 #b7789355}
.is-boy .message-send{background:#8fb1d4;border-color:#dfedff;box-shadow:0 3px 0 #668cae55}
.message-send svg{width:23px;height:23px}
.message-send:disabled{opacity:.5}
.message-login-strip{display:flex;align-items:center;justify-content:center;gap:14px;min-height:78px;padding:10px 16px max(12px,env(safe-area-inset-bottom));background:#fff5eee6;border-top:1px solid #d9c4c9}
.message-login-avatars{display:flex;padding-left:0}
.message-login-avatars .message-avatar{width:35px;height:35px;flex-basis:35px;border-radius:8px}
.message-login-avatars .message-avatar+.message-avatar{margin-left:-7px;transform:translateY(4px)}
.message-login-strip>button{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #dbb9c9;border-radius:10px;background:#f4dce6;color:#945e7a;font-size:12px}
.message-login-strip>button svg{width:18px;height:18px}
.full-note-dialog{width:min(650px,calc(100vw - 34px));max-height:78svh;border:2px solid #d8b8c6;border-radius:15px;padding:28px;background:#fff5f6;color:#604b57;box-shadow:0 20px 80px #49354440;overscroll-behavior:contain}
.full-note-dialog[data-side="boy"]{border-color:#adc4dd;background:#f2f7fd}
.full-note-dialog::backdrop{background:#382d4566;backdrop-filter:blur(3px)}
.full-note-close{position:absolute;top:9px;right:9px;border:0;border-radius:8px;padding:5px;background:#d4bdcf44;color:#876a7f;width:29px;height:29px}
.full-note-close svg{width:19px;height:19px}
.full-note-author{display:flex;align-items:center;gap:12px;margin:2px 15px 20px 0}
.full-note-author b{display:block;font-size:14px}
.full-note-author time{display:block;color:#9c8895;font-size:11px;margin-top:2px}
.full-note-body{font-size:15px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
.is-together-messages :focus-visible{outline:2px solid #c695b5;outline-offset:3px}
.messages-loading{height:100svh;display:grid;place-items:center;background:linear-gradient(110deg,#f3dce4,#f8efe9,#dce8f4)}
.messages-loading::after{content:"";width:30px;height:30px;background:url('/scene/heart-thumb-v1.svg') center/contain no-repeat}
.message-send[aria-busy="true"]{opacity:.6}
@media(max-width:600px){
  .together-back{width:32px;height:32px;left:10px;top:10px;padding:5px;border-radius:9px}
  .messages-toolbar{padding:7px 13px}.messages-toolbar>div{gap:8px}.messages-toolbar h1{font-size:12px}.messages-toolbar time{font-size:10px}
  .messages-scroll{padding:16px 12px 20px}.together-post{gap:8px;margin-bottom:18px}
  .message-avatar{width:39px;height:39px;flex-basis:39px;border-radius:8px}
  .message-post-content{width:calc(100% - 55px);max-width:82%;padding:9px 11px 11px}
  .message-post-meta{gap:6px;margin-bottom:4px}.message-post-meta time{font-size:9px}.message-preview p{font-size:13px;line-height:1.8}
  .together-composer{gap:8px;padding:9px 10px max(9px,env(safe-area-inset-bottom))}.together-composer>.message-avatar{width:35px;height:35px;flex-basis:35px}
  .together-composer textarea{min-height:48px;padding:8px 10px;font-size:12px}.message-send{width:38px;height:38px;padding:7px}
  .composer-actions{gap:5px;flex-direction:column;margin-bottom:16px}.message-add-photo{width:38px;height:38px;padding:7px}
  .message-login-strip{gap:9px;min-height:70px}.message-login-strip>button{font-size:11px;padding:8px 10px}
  .full-note-dialog{padding:25px 20px}.full-note-body{font-size:14px}
}
