/* 已确认的伙伴卡片设计；仅覆盖角色页，不改变消息列表和其他按钮。 */
html body .page.roles-page { padding: 0 16px 110px; background: #f6f7f8!important; min-height: 100dvh; }
html body .roles-page > .header { margin: 0 -16px; padding: 0 16px; min-height: 56px; background: #fff!important; border-bottom: 1px solid #eef0f2; }
html body .roles-page .role-create { border: 0; padding: 10px 0 10px 12px; background: transparent; color: #078744; font: inherit; font-size: 15px; cursor: pointer; }
.roles-page .roles-intro { margin: 18px 2px 16px; color: #7a8088; font-size: 13px; line-height: 1.6; }
html body .roles-page .role-list-container { padding: 0; background: transparent; }
html body .roles-page .role-item { position: relative; display: grid!important; grid-template-columns: 60px minmax(0,1fr) 28px; gap: 16px 14px!important; padding: 16px!important; margin: 0 0 14px!important; border: 1px solid #e3e6e9!important; border-radius: 16px!important; background: #fff!important; box-shadow: none!important; }
html body .roles-page .role-item::before, html body .roles-page .role-item::after { content: none!important; }
html body .roles-page .role-item .role-avatar { grid-column: 1; grid-row: 1; width: 60px!important; height: 60px!important; padding: 0; overflow: hidden; border: 0; border-radius: 13px!important; background: #edf5ef!important; box-shadow: none!important; cursor: pointer; }
html body .roles-page .role-item:nth-child(2n+1) .role-avatar { background: #fcf0e9!important; }
html body .roles-page .role-item .role-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px!important; }
html body .roles-page .role-item .role-avatar-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #7c8580; font-size: 30px; font-weight: 400; }
.roles-page .role-avatar[aria-busy="true"] { opacity: .5; cursor: wait; }
html body .roles-page .role-info { display: contents; }
html body .roles-page .role-actions { grid-column:1 / -1; grid-row:3; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin:0; }
html body .roles-page .role-top { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-width: 0; margin: 0; }
html body .roles-page .role-name { color: #202124; text-decoration: none; font-size: 18px; line-height: 1.4; font-weight: 650; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
html body .roles-page .role-status { position: static; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent!important; color: #858a91; font-size: 12px; }
html body .roles-page .role-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body .roles-page .role-status.active { color: #078744; }
html body .roles-page .role-desc { grid-column: 1 / -1; grid-row: 2; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #727880; font-size: 14px; line-height: 1.75; min-width: 0; overflow-wrap: anywhere; }
html body .roles-page .role-setting-btn { width:auto; min-width:0; min-height:42px; padding:10px 14px; border:1px solid #e0e4e7; border-radius:10px; background:transparent; box-shadow:none; font-size:14px; }
html body .roles-page .role-setting-btn svg, html body .roles-page .role-setting-btn span { display:block; }
html body .roles-page .role-setting-btn svg { color:#887658; }
html body .roles-page .role-setting-btn::after { content:none; }
html body .roles-page .role-item .role-toggle-btn { grid-column: 1 / -1; grid-row: 3; justify-self: end; min-height: 42px; padding: 10px 16px; border-radius: 10px; font-size: 14px; }
html body .roles-page .role-item .role-toggle-btn.is-chat,
html body .roles-page .role-item .role-toggle-btn.is-chat:is(:hover,:active) { color: #fff!important; border: 1px solid #078744!important; background: #078744!important; box-shadow: none!important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .roles-page :is(button,a):focus-visible { outline: 2px solid #078744; outline-offset: 3px; }
@media(max-width:360px) { html body .roles-page .role-item { padding: 14px!important; gap: 14px 10px!important; } html body .roles-page .role-name { font-size: 17px; } }