/* One shared owner/AI relationship. Human circles remain dominant; crowns stay upper-right. */
html body .owner-avatar{position:relative;display:inline-block;vertical-align:middle;width:46px;height:58px;flex:0 0 46px;overflow:visible;isolation:auto}
html body .owner-avatar>.owner-avatar-face{position:relative!important;display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;flex:none!important;margin:0!important;padding:0!important;border-radius:50%;font-size:calc(11px * var(--pg-ts,1))!important;line-height:1!important;z-index:var(--member-stack,2);transform:none!important;isolation:auto}
html body .owner-avatar-stack{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:7px 0!important;overflow:visible!important;padding-right:12px;isolation:isolate}
html body .owner-avatar-stack>.owner-avatar{width:28px;flex-basis:28px;margin:0;}
html body .owner-avatar-stack>.owner-avatar:last-of-type{margin-right:17px}
html body .owner-avatar-stack>.vacant{align-self:flex-start;margin-top:0!important;margin-left:14px!important}
html body .owner-avatar-stack>span:not(.owner-avatar){align-self:center;margin-left:18px}
html body .owner-avatar>.owner-ai-badge{position:absolute;left:15px;top:28px;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:50%;z-index:30;cursor:pointer;touch-action:manipulation;transition:transform .16s ease}
html body .owner-ai-disc{width:18px;height:18px;display:grid;place-items:center;background:#fff;border:1px solid #d9e0ed;border-radius:50%;box-shadow:0 1px 3px #14233b24;pointer-events:none}
html body .owner-ai-disc>img{display:block;width:13px!important;height:13px!important;object-fit:contain}
html body .owner-ai-count{position:absolute;right:0;bottom:0;display:grid;place-items:center;min-width:12px;height:12px;padding:0 2px;border:1px solid #fff;border-radius:5px;background:#475ed0;color:#fff;font-size:calc(8px * var(--pg-ts,1))!important;line-height:1!important;font-weight:700;pointer-events:none}
html body .owner-avatar>.owner-ai-badge:focus-visible{outline:2px solid #6c84e5;outline-offset:1px}
html body .owner-avatar-stack :is(.ai-people,.room-ai)[hidden],html body :is(.ai-people,.room-ai)[hidden],html body :is(.ai-people,.room-ai)>[hidden]{display:none!important}
html body .owner-avatar-message{width:47px;flex-basis:47px;min-height:58px}
html body .owner-avatar-header{width:46px;height:53px;flex-basis:46px;align-self:center;margin-top:9px}
html body .owner-avatar-profile{width:88px;height:91px;flex-basis:88px}
html body .owner-avatar-profile>.owner-avatar-face{width:68px!important;min-width:68px!important;height:68px!important;font-size:calc(26px * var(--pg-ts,1))!important}
html body .owner-avatar-profile>.owner-avatar-face>i{display:none}
html body .owner-avatar-profile>.owner-ai-badge{left:51px;top:51px;width:32px!important;height:32px!important}
html body .owner-avatar-profile .owner-ai-disc{width:24px;height:24px}
html body .owner-avatar-profile .owner-ai-disc>img{width:18px!important;height:18px!important}
html body .owner-avatar-picker{height:54px}
#owner-ai-list{box-sizing:border-box;width:min(390px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:24px;border-radius:23px;border:1px solid var(--surface-border,#dce2ef);color:var(--surface-ink,#243147);background:var(--glass-surface,rgba(243,247,252,.88));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 22px 70px #15243a30}
#owner-ai-list::backdrop{background:#15243a35;backdrop-filter:blur(3px)}
#owner-ai-list .ai-close{position:absolute;right:12px;top:12px;width:32px;height:32px;color:var(--surface-muted,#69798b);font-size:calc(24px * var(--pg-ts,1));border-radius:50%}
#owner-ai-list .owner-ai-heading{display:flex;gap:12px;align-items:center;margin:12px 16px 22px 0}
#owner-ai-list h2{font-size:calc(19px * var(--pg-ts,1));line-height:1.3;margin:0 0 6px}
#owner-ai-list p{font-size:calc(12px * var(--pg-ts,1));line-height:1.45;margin:0;color:var(--surface-muted,#5b6b80)}
#owner-ai-list .owner-ai-portrait{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#dce4ee;color:#354b69;font-size:calc(15px * var(--pg-ts,1))}
#owner-ai-list .owner-ai-options{display:grid;gap:7px}
#owner-ai-list .owner-ai-option{width:100%;min-height:60px;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--surface-border,#dce2ef);border-radius:13px;padding:10px 12px;background:#ffffff55;color:inherit}
#owner-ai-list .owner-ai-option b{display:block;font-size:calc(14px * var(--pg-ts,1));font-weight:600;line-height:1.4}
#owner-ai-list .owner-ai-option small{display:block;font-size:calc(11px * var(--pg-ts,1));color:var(--surface-muted,#5b6b80);line-height:1.5}
#owner-ai-list .owner-ai-service{width:32px;height:32px;display:grid;place-items:center;background:white;border-radius:50%;flex:0 0 32px}
#owner-ai-list .owner-ai-service img{width:22px;height:22px}
#owner-ai-list .owner-ai-chevron{margin-left:auto;color:var(--surface-muted,#5b6b80)}
body.dark #owner-ai-list{background:rgba(29,40,57,.94)}
body.dark #owner-ai-list .owner-ai-option{background:#ffffff08}
@media(hover:hover) and (pointer:fine){html body .owner-avatar>.owner-ai-badge:hover{transform:translateY(-1px) scale(1.1)}#owner-ai-list .owner-ai-option:hover{background:#8096dc18}}
@media(max-width:800px){
 html body #owner-ai-list.phone-screen{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:calc(66px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));background:#f6f8fc;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--surface-ink,#243147)}
 html body.dark #owner-ai-list.phone-screen{background:#182230}
 html body #profile-preview.phone-screen>header.profile-identity.owner-profile-identity{display:flex!important;margin:12px 22px 20px;gap:12px;align-items:center}
 html body #profile-preview.phone-screen>.owner-profile-identity h2{font-size:calc(20px * var(--pg-ts,1))!important;line-height:1.3!important}
 html body #profile-preview.phone-screen>.owner-profile-identity>div>span{display:none}
 html body .owner-avatar-header{height:44px;margin-top:0}
 html body .owner-avatar-header>.owner-avatar-face{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}
 html body .owner-avatar-header>.owner-ai-badge{top:22px;left:14px}
}
@media(prefers-reduced-motion:reduce){html body .owner-avatar>.owner-ai-badge{transition:none;transform:none!important}}

/* Empty AI associations do not add unused space; room counts align with the human faces. */
html body .owner-avatar-compact:not(.has-owner-ai){height:34px}
html body .owner-avatar-stack>.owner-avatar:last-of-type{margin-right:6px}
html body .party .owner-avatar-stack>.vacant{width:28px;height:28px;min-width:28px;flex:0 0 28px;margin-left:4px!important;margin-top:3px!important}
html body .room-people.owner-avatar-stack>span:not(.owner-avatar){align-self:flex-start;margin-top:11px;margin-left:16px}
html body #owner-ai-list.owner-ai-dialog.phone-screen>header.owner-ai-heading{display:flex!important}

html body .owner-avatar-profile>.owner-avatar-face{background:#dfe7f3;color:#354b69;border-color:#fff;outline:none}
html body .owner-avatar-profile>.owner-ai-badge{left:53px;top:53px}
@media(min-width:801px){
 html body #friend-invite-list{height:174px;max-height:174px}
 html body #friend-invite-dialog .invite-friend-row{height:58px;min-height:58px}
}
@media(max-width:800px){html body #friend-invite-dialog .invite-friend-row{height:66px!important;min-height:66px!important}}

.owner-profile-message-icon{display:none}
@media(max-width:800px){
 html body #owner-ai-list.owner-ai-dialog.phone-screen>header.owner-ai-heading{margin:22px 22px 18px!important}
 html body .owner-profile-identity .profile-message-button{display:grid;place-items:center;min-width:44px;width:44px;height:44px;padding:10px;font-size:0!important}
 .owner-profile-identity .profile-message-button>span{display:none}
 .owner-profile-message-icon{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
}

/* Cards: inset AI mark belongs to the person; the whole portrait opens their profile. */
html body .owner-avatar-stack>.owner-avatar-card{width:27px;flex-basis:27px;height:34px;isolation:isolate;z-index:var(--owner-stack,1)}
html body .owner-avatar-card>.owner-ai-badge{left:18px;top:18px;width:13px!important;min-width:13px!important;height:13px!important;min-height:13px!important;pointer-events:none;cursor:inherit;z-index:10}
html body .owner-avatar-card .owner-ai-disc{width:13px;height:13px;border:1.5px solid #fff;box-shadow:0 0 0 1px #aebcce70}
html body .owner-avatar-card .owner-ai-disc>img{width:10px!important;height:10px!important}
html body .owner-avatar-card .owner-ai-count{display:none}
html body .owner-avatar-card>.owner-avatar-face{font-size:calc(10px * var(--pg-ts,1))!important;padding:0 3px 2px 0!important}

/* Human identity is a portrait; provider logos keep their own silhouette. */
html body .owner-avatar-face.has-pixel-portrait{padding:0!important;position:relative}
html body .human-pixel-avatar{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;image-rendering:pixelated;pointer-events:none}
html body .owner-ai-disc{background:transparent;border:0;border-radius:0;box-shadow:none}
html body .owner-ai-disc>img{width:18px!important;height:18px!important;filter:drop-shadow(0 0 1px #fff)}
html body .owner-avatar-card .owner-ai-disc{width:14px;height:14px;border:0;box-shadow:none}
html body .owner-avatar-card .owner-ai-disc>img{width:14px!important;height:14px!important}
html body .owner-avatar-profile .owner-ai-disc>img{width:24px!important;height:24px!important}
html body .owner-ai-portrait{overflow:hidden}
html body .room-people.owner-avatar-stack>span:not(.owner-avatar){margin-left:16px!important;flex-shrink:0}

/* Pixel AI label matches the portraits. Provider brands stay in AI details. */
html body .owner-ai-disc{width:22px;height:16px;border-radius:3px;background:#dfe7f3;color:#3c5278;box-shadow:0 0 0 1.5px #f6f8fc}
html body .owner-ai-disc>svg{display:block;width:16px;height:13px}
html body .owner-avatar-card>.owner-ai-badge{left:17px;top:23px;width:17px!important;min-width:17px!important;height:12px!important;min-height:12px!important}
html body .owner-avatar-card .owner-ai-disc{width:17px;height:12px;border-radius:2px;box-shadow:0 0 0 1px #ecedf3}
html body .owner-avatar-card .owner-ai-disc>svg{width:13px;height:11px}
html body.dark .owner-ai-disc{background:#2d405b;color:#d2e0fa;box-shadow:0 0 0 1.5px #182230}
html body.dark .owner-avatar-card .owner-ai-disc{box-shadow:0 0 0 1px #242a33}
html body #profile-preview .owner-avatar-profile>.owner-ai-badge{display:none!important}

/* The account-menu portrait is the person only, without an AI badge or count. */
html body .owner-avatar-header{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;align-self:center;margin:0}
html body .owner-avatar-header>.owner-ai-badge{display:none!important}
html body .owner-avatar-picker:not(.has-owner-ai){height:34px}

/* 2026-10-03 Claude: an AI-owner badge is just the number of AIs this person brought, sitting on the bottom-right edge of the avatar circle. */
html body .owner-avatar>.owner-ai-badge,html body .owner-avatar-header>.owner-ai-badge,html body .owner-avatar-profile>.owner-ai-badge{left:auto;top:auto;right:-4px;bottom:-3px;width:auto!important;min-width:17px!important;height:17px!important;min-height:17px!important;background:none!important;border:0!important;box-shadow:none!important}
html body .owner-avatar>.owner-ai-badge>.owner-ai-count{position:static;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid #fff;border-radius:9px;background:#475ed0;color:#fff;font-size:calc(10px * var(--pg-ts,1))!important;font-weight:700;line-height:1!important;box-shadow:0 1px 3px #14233b33}
body.dark .owner-avatar>.owner-ai-badge>.owner-ai-count{border-color:#1c293c}
html body .owner-avatar-profile>.owner-ai-badge{right:0;bottom:0}html body .owner-avatar-profile>.owner-ai-badge>.owner-ai-count{min-width:22px;height:22px;border-radius:11px;font-size:calc(12px * var(--pg-ts,1))!important}
/* 2026-10-03 Claude: the count sits on the bottom-right edge of the face circle (the box no longer needs room for the old 'AI' disc below). */
html body .owner-avatar.has-owner-ai{height:34px}html body .owner-avatar-message{min-height:34px}
html body .owner-avatar>.owner-ai-badge{left:21px!important;top:21px!important;right:auto!important;bottom:auto!important}
html body .owner-avatar-header>.owner-ai-badge{left:19px!important;top:19px!important}
html body .owner-avatar-profile>.owner-ai-badge{left:auto!important;top:auto!important;right:0!important;bottom:0!important}
html body .owner-avatar-card>.owner-ai-badge{left:15px!important;top:17px!important}
html body .owner-avatar-card>.owner-ai-badge>.owner-ai-count{display:grid;min-width:13px;height:13px;padding:0 2px;font-size:calc(8px * var(--pg-ts,1))!important;border-width:1.5px}

/* 2026-10-04 Claude: '+N' for open seats that do not fit on a card's line (fitSeats in owner-ai-avatars.js). */
html body .party .people>.seat-more{flex:none;align-self:center;margin-left:6px;font-size:calc(11px * var(--pg-ts,1));line-height:1;color:#8a95a6;font-weight:600}
html body .party .people>.vacant[hidden]{display:none!important}
/* 2026-10-05 Claude: '+N' hides too when the members fill the line (its display:grid below used to win over [hidden], so it stayed, wrapped). */
html body .party .people>.seat-more[hidden]{display:none!important}

/* 2026-10-04 Claude: the first open seat keeps the same gap from the last face as seats keep from each other; '+N' reads as more open seats. */
html body .party .owner-avatar-stack>.owner-avatar+.vacant{margin-left:10px!important}
html body .party .people>.seat-more{display:grid;place-items:center;width:28px;height:28px;margin-left:4px;margin-top:3px;align-self:flex-start;border:1px dashed #a9afb9;border-radius:50%;font-size:calc(10px * var(--pg-ts,1));color:#7d8796;box-sizing:border-box}
/* 2026-10-05 Claude (감독 '1표시는 지우고 사용자 옆에 소환수처럼 서있어야한다고(살짝 겹쳐있어도 됨)', '소환수는 사용자와 같은 땅(가상의)에 나란히
   서있어야', '하얀색 테두리 얇게 … 픽셀 최소'): the AI stands on the same ground as its person, right beside them (a little overlapped) — its own icon
   with a 1 px white edge that follows its shape (no disc, no number), bobbing on its own beat like the characters (0/2 px steps).
   --pet-face is the person's picture size there, --pet-size the pet's; the pet's feet sit on the picture's bottom line. */
html body .owner-avatar{--pet-face:40px;--pet-size:16px}
html body .party .owner-avatar,html body .archive-card .owner-avatar{--pet-face:28px;--pet-size:12px}
html body .owner-avatar-profile{--pet-face:68px;--pet-size:24px}
html body .owner-avatar>.owner-ai-badge{left:calc(var(--pet-face) - 11px)!important;right:auto!important;top:calc(var(--pet-face) - var(--pet-size) - 1px)!important;bottom:auto!important;width:auto!important;min-width:0!important;height:var(--pet-size)!important;min-height:0!important;display:flex!important;align-items:flex-end!important;place-items:end!important;border-radius:0!important;overflow:visible!important;z-index:31}
html body .owner-avatar>.owner-ai-badge .owner-ai-count{display:none}
/* (감독 '소환수 사이즈도 위아래 사이즈 균일하게 하고 너무 크면 안됨') every pet is the same height, its width follows its own shape */
/* 2026-10-06 (피드백 F3 'AI 아이콘 주위 흰 선 얇게'): the white edge is half a pixel now (one device pixel on 2x screens). */
html body .owner-ai-pet{display:block;flex:none;height:var(--pet-size,16px);width:auto;max-width:calc(var(--pet-size,16px)*1.6);object-fit:contain;object-position:bottom;image-rendering:pixelated;filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff) drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff);animation:pg-pet-bob 1120ms step-end infinite;animation-delay:var(--pg-bob-delay,0ms);pointer-events:none}
html body .owner-ai-pet+.owner-ai-pet{margin-left:-8px}
/* in the party window's row the person with an AI is no taller than the others, and keeps room beside them for it */
html body .party-room .room-people .owner-avatar.has-owner-ai{height:auto}
html body .party-room .room-people.owner-avatar-stack>.owner-avatar.has-owner-ai{margin-right:calc(10px + 14px*(var(--pet-cols,1) - 1))}/* 2026-10-11: room for each further pet (five to a line), so they do not stand on the next person */
@keyframes pg-pet-bob{0%{translate:0 0}37.5%{translate:0 2px}87.5%{translate:0 0}}
/* (감독 '소환수 파티 입장시 사용자목록 아바타옆에 뾱! 하고 튀어나오는 모션추가') an AI that just arrived pops out beside its person, then bobs */
@keyframes pg-pet-pop{0%{scale:0;opacity:0}55%{scale:1.4;opacity:1}78%{scale:.88}100%{scale:1}}
html body .owner-ai-pet.is-pop{transform-origin:50% 100%;animation:pg-pet-pop 560ms cubic-bezier(.2,.9,.3,1.3) both,pg-pet-bob 1120ms step-end infinite;animation-delay:0ms,var(--pg-bob-delay,0ms)}
@media(prefers-reduced-motion:reduce){html body .owner-ai-pet{animation:none}}
/* in the conversation the pet stands at the speaker's lower right too, between them and their bubble */
html body .owner-avatar-message{min-height:0}
/* (감독 '사용성 우선'): the conversation keeps its original spacing between messages (24 px; less between one person's messages in a row). */
/* 2026-10-05 Claude (감독 '캐릭터들간 좌우간격 좀더 좁혀', '상단 참여자리스트의 아바타는 채팅말풍선 옆 아바타 사이즈보다 작게', '2명 이것도 지워',
   '아바타랑 소환수랑 살짝겹쳐있어도 되니 좌우 간격 좁혀'): the row of people shows 30 px characters (the conversation's are 40 px) 17 px apart, each
   pet 12 px tall a little over its person, no head count (the '+N' place says how many more when they do not all fit), and the AI chips at the
   right stop at three and a '+N'. */
/* (감독 '상단 아바타 사이즈 너무 작아진거 같긴하다 원래 사이즈로돌려줘') the row's characters are 40 px again, 24 px apart (they were 28) */
html body .party-room .room-people.owner-avatar-stack>.owner-avatar{width:24px;flex-basis:24px;--pet-face:40px;--pet-size:16px}
html body .party-room .room-people.owner-avatar-stack>.owner-avatar:last-of-type{margin-right:16px}
html body .party-room .room-chat>.room-people>span:not([class]){display:none!important}
html body .party-room .room-people>.room-people-more{flex:0 0 auto;width:auto;min-width:30px;height:24px;min-height:24px;padding:0 7px;border-radius:12px;font-size:calc(12px * var(--pg-ts,1));align-self:center;margin-left:18px}
html body .party-room .room-people .room-ai-more{align-self:center;margin-left:4px;font-size:calc(11px * var(--pg-ts,1));color:var(--pg-muted,#6b7385)}
/* beside a message: only the number of AIs that person summoned (small, at the picture's lower right; the AIs speak as themselves) */
html body .owner-avatar>.owner-ai-badge.is-count{left:calc(var(--pet-face,40px) - 13px)!important;right:auto!important;top:calc(var(--pet-face,40px) - 14px)!important;bottom:auto!important;height:auto!important}/* (감독 '숫자는 캐릭터랑 겹쳐있어야') on the picture's lower-right corner */
html body .owner-avatar>.owner-ai-badge.is-count .owner-ai-count{display:grid;position:static;min-width:13px;height:13px;padding:0 3px;border:1px solid #fff;border-radius:5px;background:#475ed0;color:#fff;font-size:calc(8.5px * var(--pg-ts,1))!important;line-height:1!important;font-weight:700}
html body .owner-avatar-message:has(>.owner-ai-badge.is-count) .owner-ai-pet{display:none}
/* the '+N' place of a crowded row: a small white pill that stays readable over the conversation */
html body .party-room .room-people>.room-people-more{background:#fff;color:#354b69;border:1px solid #d6deea;box-shadow:0 1px 4px #1d2b4024;font-weight:700}
html body.dark .party-room .room-people>.room-people-more{background:#1c2433;color:#dbe4f5;border-color:#3a4760}
/* the fold button at the row's left; folded, only it stays and the conversation starts higher */
html body .party-room .room-people>.room-people-toggle{flex:0 0 22px;width:22px;height:22px;min-width:22px;min-height:22px;align-self:center;margin:0 3px 0 -6px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--pg-muted,#6b7385);display:grid;place-items:center;cursor:pointer}
html body .party-room .room-people>.room-people-toggle:hover{background:#8a9bb61f}
html body .party-room .room-people>.room-people-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
html body .party-room .room-people.is-collapsed>.room-people-toggle svg{transform:rotate(180deg)}
html body .party-room .room-people.is-collapsed>:not(.room-people-toggle){display:none!important}
html body .party-room .room-people>.room-people-toggle:focus-visible{outline:2px solid #6c84e5;outline-offset:2px}
html body.dark .party-room .room-people>.room-people-toggle{color:#9aa6ba}
@media(prefers-reduced-motion:reduce){html body .party-room .room-people>.room-people-toggle svg{transition:none}}
/* the plugin offer inside the AI invite: a small link, not a banner */
#room-ai-panel .ai-invite-plugin{display:block;margin:10px 0 0;padding:0;border:0;background:none;color:var(--pg-ink,#1d2433);font-size:calc(12.5px * var(--pg-ts,1));font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:start;min-height:0}/* the house text colour, not blue (the common UI rules) */
body.dark #room-ai-panel .ai-invite-plugin{color:#e7ecf5}
/* 2026-10-05 Claude (감독 '사용자목록 좌측에 접기버튼을 하단 중앙에 접기버튼으로 변경'): the fold button is a small handle at the bottom middle of the row,
   on its line — ▴ folds the row up, ▾ (folded; the row's line hidden so only the header line stays) brings it back.
   The :is(#party-preview,…) part outranks the page's own button reset (which has an id in it); the press motion uses `scale`, so the centring transform stays. */
html body .party-room .room-chat>.room-people{position:relative}
html body :is(#party-preview,.party-preview).party-room .room-people>.room-people-toggle{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:8;width:34px;min-width:34px;height:18px;min-height:18px;margin:0;padding:0;border:1px solid #d6deea;border-radius:9px;background:#fff;color:#354b69;box-shadow:0 1px 3px #1d2b401a}
html body :is(#party-preview,.party-preview).party-room .room-people>.room-people-toggle::before{content:"";position:absolute;inset:-6px -8px}/* a bigger touch area */
html body :is(#party-preview,.party-preview).party-room .room-people>.room-people-toggle:hover{background:#f3f6fb}
html body .party-room .room-people>.room-people-toggle svg{width:12px;height:12px}
html body :is(#party-preview,.party-preview).party-room .room-chat>.room-people.is-collapsed{border-bottom-color:transparent}
html body.dark :is(#party-preview,.party-preview).party-room .room-people>.room-people-toggle{background:#1c2433;border-color:#3a4760;color:#dbe4f5}
html body.dark :is(#party-preview,.party-preview).party-room .room-people>.room-people-toggle:hover{background:#243047}

/* 2026-10-06 Claude (아랍어 오른쪽→왼쪽 배치 점검 18건 중 18건의 대부분): 겹쳐 쌓는 사람 줄은 왼쪽 여백(-15px 등) 규칙으로 쌓는다.
   오른쪽→왼쪽 언어에서 줄 방향이 뒤집히면 얼굴이 빈자리·토큰·AI 칩 위로 겹치므로 줄의 배치 순서만 왼쪽→오른쪽으로 두고, 안의 글자는 오른쪽→왼쪽 그대로. */
html[dir=rtl] :is(.party .people,.owner-avatar-stack,.room-people){direction:ltr}
html[dir=rtl] :is(.party .people,.owner-avatar-stack,.room-people) :is(span,em,small,.room-ai-chip,.room-token-total,.seat-more){direction:rtl;unicode-bidi:isolate}

/* 2026-10-11 Claude (감독 '에이전트 두개이상 불렀을때 가시성', '소환수 10마리 불렀을때를 가정', '클릭이 잘 안됨'): in a party window's row each pet
   has a 14 px place of its own (no overlap), five to a line; a second line stands above the first. No number beside the pets. */
html body .party-room .room-people .owner-avatar>.owner-ai-badge{width:calc(14px*var(--pet-cols,1))!important;height:calc(var(--pet-size)*var(--pet-rows,1))!important;top:calc(var(--pet-face) - var(--pet-size)*var(--pet-rows,1) - 1px)!important;flex-wrap:wrap-reverse!important;align-content:flex-start!important;place-items:end start!important}
html body .party-room .room-people .owner-ai-pet-wrap{width:14px;height:var(--pet-size);justify-content:center;align-items:flex-end;margin-left:0!important}
html body .party-room .room-people .owner-ai-pet-wrap>.owner-ai-pet{max-width:14px}
html body .party-room .room-people .owner-ai-pet-wrap::after{content:"";position:absolute;inset:-7px 0}/* a taller place to tap */
#owner-ai-list .owner-ai-option>.owner-ai-dot{position:static;flex:none;width:9px;height:9px;margin-left:auto}