/* 2026-10-03 Claude: friends and direct messages (social-live.js). Colours follow the existing message board. */
.dm-contacts .dm-unread{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e24b4b;color:#fff;font:600 calc(9px * var(--pg-ts,1))/16px Arial,"PG Hangul",sans-serif;font-style:normal;text-align:center;box-sizing:border-box}
.dm-contacts .dm-friends-link{color:#4a64c6;font-weight:600}
.dm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:18px;box-sizing:border-box;text-align:center;font-size:calc(12px * var(--pg-ts,1));line-height:1.45;color:#5d6678}
.dm-empty p{margin:0}
.dm-empty.dm-empty-inline{height:auto;padding:12px 14px 4px}
.dm-gate-action,.dm-invite-join{padding:8px 14px;border:0;border-radius:8px;background:var(--pg-btn-bg);color:var(--pg-btn-fg);font:600 calc(11px * var(--pg-ts,1))/1.2 Arial,"PG Hangul",sans-serif;cursor:pointer}
.dm-gate-action:disabled,.dm-invite-join:disabled{background:#c9d0de;cursor:default}
.dm-message small{display:block;margin-top:2px;font-size:calc(9px * var(--pg-ts,1));color:#9299a7}
.dm-message.mine small{text-align:right}
.dm-pending{opacity:.6}
.dm-failed{opacity:1}
.dm-failed small{color:#d14343}
.dm-invite{padding:10px 12px;border:1px solid #dce1eb;border-radius:12px;background:#f6f8fc}
html body #dm-board .dm-message.dm-invite p{margin:0 0 4px;padding:0;background:none!important;border:0;box-shadow:none}
.dm-invite .dm-invite-join{margin-top:8px}
.dm-loading{color:#9299a7;text-align:center}
.profile-social{display:flex;gap:6px;margin-left:auto}
.profile-social .profile-message-button{margin-left:0}
.profile-social .profile-message-button:disabled{opacity:.6;cursor:default}
.pg-friends{display:grid;gap:14px}
.pg-friend-find{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.pg-friend-find label{display:grid;gap:6px;font-size:calc(12px * var(--pg-ts,1))}
.pg-friend-find input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #dce1eb;border-radius:8px;font:calc(13px * var(--pg-ts,1))/1.3 Arial,"PG Hangul",sans-serif}
.pg-friend-status{grid-column:1/-1;min-height:1em;margin:0;font-size:calc(11px * var(--pg-ts,1));color:#5d6678}
.pg-friend-me{margin:0;font-size:calc(11px * var(--pg-ts,1));color:#5d6678}
.pg-friend-me button{margin-left:6px;padding:3px 8px;border:1px solid #dce1eb;border-radius:6px;font-size:calc(10px * var(--pg-ts,1))}
.pg-friend-section h3{margin:0 0 6px;font-size:calc(12px * var(--pg-ts,1))}
.pg-friend-section h3 small{font-weight:400;color:#9299a7}
.pg-friend-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #edf0f5;font-size:calc(12px * var(--pg-ts,1))}
.pg-friend-row .action-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.pg-room-friends{margin-bottom:12px}
#app-navigation [data-nav=requests][data-count]::after{content:attr(data-count);margin-left:6px;padding:0 6px;border-radius:9px;background:#e24b4b;color:#fff;font:600 calc(10px * var(--pg-ts,1))/16px Arial,"PG Hangul",sans-serif}
.dark .dm-invite{background:#2a303b;border-color:#414957}
.dark .pg-friend-row{border-color:#383f4d}
.dark .pg-friend-find input,.dark .pg-friend-me button{background:#222731;color:#e9edf5;border-color:#414957}
.dark .dm-empty,.dark .pg-friend-me,.dark .pg-friend-status{color:#b6bfce}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){.pg-friend-find{grid-template-columns:1fr}.pg-friend-row{flex-wrap:wrap}.pg-friend-row .action-row{width:100%;justify-content:flex-start}}
.pg-partners{display:grid;gap:18px;padding:8px 0 16px}
.pg-partners h3{margin:0 0 6px;font-size:calc(14px * var(--pg-ts,1))}
.pg-partner{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #edf0f5}
.pg-partner b{display:block;font-size:calc(13px * var(--pg-ts,1))}
.pg-partner small{display:block;margin-top:2px;font-size:calc(11px * var(--pg-ts,1));color:#7a8394}
.pg-partner-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.pg-partner-actions button{padding:7px 12px;border:1px solid #dce1eb;border-radius:8px;background:transparent;font-size:calc(11px * var(--pg-ts,1));cursor:pointer}
.pg-partner-actions .is-primary{border-color:var(--pg-btn-bg);background:var(--pg-btn-bg);color:var(--pg-btn-fg)}
.pg-partner-actions button:disabled{opacity:.6;cursor:default}
.dark .pg-partner{border-color:#383f4d}
.dark .pg-partner-actions button{border-color:#414957;color:#e9edf5}
.dark .pg-partner-actions .is-primary{border-color:#4a64c6;color:#fff}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){.pg-partner{flex-wrap:wrap}.pg-partner-actions{width:100%;justify-content:flex-start}}
.pg-join-confirm{display:grid;gap:10px}
.pg-join-confirm p{margin:0}
.pg-join-meta{font-size:calc(12px * var(--pg-ts,1));color:#7a8394}
.pg-invite-reset{width:100%;margin-top:8px;padding:8px 10px;border:1px solid #dce1eb;border-radius:8px;background:transparent;font-size:calc(11px * var(--pg-ts,1));cursor:pointer}
.dark .pg-invite-reset{border-color:#414957;color:#e9edf5}
/* 2026-10-03 Claude: a conversation with someone who is not a friend (messages no longer need a friendship). */
#dm-board .dm-stranger{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(120,130,150,.10);font-size:calc(12px * var(--pg-ts,1));line-height:1.4}
#dm-board .dm-stranger span{flex:1 1 auto;min-width:0;opacity:.8}
#dm-board .dm-stranger button{font:inherit;font-size:calc(12px * var(--pg-ts,1));padding:5px 10px;border-radius:999px;border:1px solid rgba(120,130,150,.35);background:transparent;color:inherit;cursor:pointer}
#dm-board .dm-stranger button:disabled{opacity:.55;cursor:default}
#dm-board .dm-stranger .dm-stranger-block{color:#b4232c;border-color:rgba(180,35,44,.35)}
.dark #dm-board .dm-stranger{background:rgba(255,255,255,.07)}
.dark #dm-board .dm-stranger .dm-stranger-block{color:#ff8a8f;border-color:rgba(255,138,143,.4)}
/* 2026-10-04 Claude: invitation requests and answers — the popup that arrives at once (top layer, above party windows), the
   notices in Messages, and the private party's request dialog. Decided notices keep their buttons switched off with the decision written. */
.pg-notice-pop[popover]{position:fixed;inset:max(12px,env(safe-area-inset-top)) auto auto 50%;transform:translateX(-50%);width:min(420px,calc(100vw - 24px));height:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;z-index:2147483000}
.pg-notice-pop.is-in{animation:pg-notice-in .26s cubic-bezier(.2,.8,.2,1)}
@keyframes pg-notice-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.pg-notice-pop.is-in{animation:none}}
.pg-notice-card{position:relative;display:flex;gap:12px;padding:16px 44px 16px 16px;border-radius:18px;background:#fff;color:#1f2329;box-shadow:0 18px 50px rgba(20,26,38,.22),0 2px 6px rgba(20,26,38,.08);border:1px solid #e3e7ee;font:calc(14px * var(--pg-ts,1))/1.5 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif}
.pg-notice-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#5d6878;font-size:calc(20px * var(--pg-ts,1));line-height:1;cursor:pointer}
.pg-notice-close:hover{background:#f1f3f7}
.pg-notice-avatar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eef1f6;color:#1f2329;font-weight:700}
.pg-notice-body{min-width:0;flex:1}.pg-notice-body b{display:block;font-size:calc(15px * var(--pg-ts,1))}.pg-notice-body p{margin:2px 0 0;color:#3b4656;overflow-wrap:anywhere}.pg-notice-body small{display:block;margin-top:2px;color:#7b8696;font-size:calc(12px * var(--pg-ts,1))}
.pg-notice-actions{display:flex;gap:8px;margin-top:12px}
.pg-notice-actions button{min-height:38px;padding:8px 16px;border-radius:11px;border:1px solid #d5dbe5;background:transparent;color:#1f2329;font:600 calc(14px * var(--pg-ts,1))/1.2 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;cursor:pointer}
.pg-notice-actions .pg-notice-yes{border-color:var(--pg-btn-bg,#1f2329);background:var(--pg-btn-bg,#1f2329);color:var(--pg-btn-fg,#fff)}
.pg-notice-actions button:disabled{opacity:.42;cursor:default}
/* 2026-10-05 Claude: what a press did, under the buttons (social-live.js noticeNote); taps answer at once on phones (no double-tap zoom wait). */
.pg-notice-actions button{touch-action:manipulation}
.pg-notice-note{margin:8px 0 0;font-size:calc(12.5px * var(--pg-ts,1));line-height:1.45;color:#5b6574}.pg-notice-note.is-error{color:#b42318;font-weight:600}
body.dark .pg-notice-note{color:#aab4c4}body.dark .pg-notice-note.is-error{color:#ff8a80}
.pg-notice-state{font-weight:700;color:#2d6a4f!important;margin-top:6px!important}
[data-state=declined] .pg-notice-state,[data-state=expired] .pg-notice-state{color:#6b7280!important}
.dm-notices{display:flex;flex-direction:column;gap:10px;padding:12px;overflow:auto;max-height:100%}
.dm-notice{display:flex;gap:12px;padding:14px;border-radius:14px;border:1px solid #e3e7ee;background:#fff}
.dm-notice[data-state=waiting]{border-color:#c9d1dd;box-shadow:0 2px 10px rgba(20,26,38,.06)}
.dm-notices-link .dm-avatar{background:#1f2329;color:#fff;font-weight:700}
.pg-ask-invite .pg-ask-note{margin:12px 0 4px;color:#3b4656}
body.dark .pg-notice-card,body.dark .dm-notice{background:#1b2130;color:#e8ecf3;border-color:#2e3747}
body.dark .pg-notice-body p,body.dark .pg-ask-invite .pg-ask-note{color:#c5cede}body.dark .pg-notice-body small{color:#8d98aa}
body.dark .pg-notice-avatar{background:#2a3242;color:#e8ecf3}body.dark .pg-notice-close{color:#b5c1d2}body.dark .pg-notice-close:hover{background:#262e3d}
body.dark .pg-notice-actions button{border-color:#3a4558;color:#e8ecf3}body.dark .pg-notice-actions .pg-notice-yes{border-color:var(--pg-btn-bg);background:var(--pg-btn-bg);color:var(--pg-btn-fg)}
body.dark .pg-notice-state{color:#7ed3a4!important}body.dark .dm-notices-link .dm-avatar{background:#e8ecf3;color:#151a24}
/* 2026-10-04 Claude: the profile's friend button (first in the top row; an icon on phones like the message button beside it). */
.profile-friend-button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:12px;border:1px solid var(--pg-btn-bg,#1f2329);background:var(--pg-btn-bg,#1f2329);color:var(--pg-btn-fg,#fff);font:600 calc(14px * var(--pg-ts,1))/1.2 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;white-space:nowrap;cursor:pointer}
.profile-friend-button:disabled{opacity:.62;cursor:default;background:transparent;color:inherit;border-color:#d5dbe5}
.profile-friend-icon{display:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){html body .owner-profile-identity .profile-friend-button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:10px}html body .owner-profile-identity .profile-friend-button>span{display:none}html body .owner-profile-identity .profile-friend-icon{display:block}}
body.dark .profile-friend-button:disabled{border-color:#3a4558}
/* 2026-10-04 Claude: a private party's hidden title and description in the party list — stand-in letters drawn as a pixel mosaic. */
.party.pg-text-hidden .party-copy>h3,.party.pg-text-hidden .party-copy>p,.pg-mosaic{color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;user-select:none;width:fit-content;max-width:100%;border-radius:5px;
 background-image:repeating-conic-gradient(rgba(255,255,255,0) 0 25%,rgba(96,108,128,.30) 0 50%),repeating-conic-gradient(rgba(255,255,255,.26) 0 25%,rgba(255,255,255,0) 0 50%),linear-gradient(rgba(158,169,186,.62),rgba(158,169,186,.62));background-size:14px 14px,22px 22px,100% 100%;background-position:0 0,5px 3px,0 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pg-mosaic{display:inline;padding:0 2px}
/* 2026-10-04 Claude: the chat bubble copy button (bubble-copy.js) — a small round button beside the bubble; on phones a long press copies. */
/* 2026-10-05 Claude (감독 '채팅 말풍선 하단끝에 복사버튼 만들어놔'): the time and a copy button under each sent text bubble — the button at the bubble's
   lower end (others and AIs: bottom right of the bubble; mine: after the time at the right). Small and quiet, a 26px target that does not grow the line. */
.pg-copy-btn{display:inline-grid;place-items:center;width:26px;height:26px;margin:-5px 0;padding:0;border:0;border-radius:8px;background:transparent;color:#8a93a3;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.pg-copy-btn:hover{background:#eef1f6;color:#1f2329}.pg-copy-btn:focus-visible{outline:2px solid #4f6bff;outline-offset:1px}
.pg-copy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.dark .pg-copy-btn{color:#9aa6ba}body.dark .pg-copy-btn:hover{background:#28324a;color:#e6ebf3}
:is(#party-preview,.party-preview).party-room .room-message .room-message-foot{display:inline-flex;align-items:center;gap:2px}
:is(#party-preview,.party-preview).party-room .room-message:is(.is-other,.is-ai) .room-message-meta .room-message-foot{order:2;align-self:stretch;justify-content:space-between;margin:4px 0 0 4px}
:is(#party-preview,.party-preview).party-room .room-message.is-ai.is-mine-ai .room-message-meta .room-message-foot{justify-content:flex-end;margin:4px 2px 0 0}
:is(#party-preview,.party-preview).party-room .room-message:is(.is-other,.is-ai,.is-mine) .room-message-meta .room-message-foot time{margin:0;order:0}
.dm-foot{display:flex;align-items:center;gap:2px;margin-top:2px}.dm-message.mine .dm-foot{justify-content:flex-end}.dm-foot small{margin-top:0}

/* 2026-10-05 Claude (감독 A8 쪽지 읽음 표시): the '1' beside my message until the other person reads it — small, bold, the mention yellow. */
.dm-unread-mark{flex:none;margin-right:4px;font-size:calc(11px * var(--pg-ts,1));font-weight:700;line-height:1;color:#d99a00}
body.dark .dm-unread-mark{color:#ffcf4a}

/* 2026-10-05 Claude (감독 B10 친구 접속 상태 점): green = Playground open now, grey = not; a white ring keeps it apart from the picture. */
#dm-board .dm-contacts .dm-avatar{position:relative}
#dm-board .dm-presence{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#b4bcc8;box-shadow:0 0 0 2px #fff;pointer-events:none}
#dm-board .dm-presence.is-on{background:#22c55e}
body.dark #dm-board .dm-presence{box-shadow:0 0 0 2px #1d2433}body.dark #dm-board .dm-presence:not(.is-on){background:#5b6578}

/* 2026-10-05 Claude (감독 A5 새로운 사람): the section title with a small 'Show others' button on its right (grey, not a blue text button). */
.pg-partners-new h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pg-partners-new .pg-partners-shuffle{border:0;background:#eef1f6;color:#3d4757;border-radius:999px;padding:6px 12px;font:600 calc(12.5px * var(--pg-ts,1))/1.2 inherit;cursor:pointer}
.pg-partners-new .pg-partners-shuffle:hover{background:#e2e7ef}
body.dark .pg-partners-new .pg-partners-shuffle{background:#28324a;color:#d9e0ec}