/* ── Right Panel ── */
.rpanel-panel{
position:fixed;
top:var(--gap);
right:var(--gap);
width:400px;
max-height:calc(100vh - var(--gap) * 2);
background:var(--ooo);
border:var(--bt1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
z-index:9990;
display:flex;
flex-direction:column;
transform:translateX(calc(100% + var(--gap)));
transition:transform 200ms cubic-bezier(0.4,0,0.2,1);
overflow:hidden;
}
body.rpanel-open .rpanel-panel{
transform:translateX(0);
}

/* ── Backdrop: always overlay ── */
.rpanel-backdrop{
display:none;
position:fixed;
top:0;left:0;
width:100%;height:100%;
z-index:9989;
background:rgba(0,0,0,0.4);
}
body.rpanel-open .rpanel-backdrop{
display:block;
}

/* ── Header ── */
.rpanel-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 10px 10px 16px;
flex-shrink:0;
}
.rpanel-header-title{
font-size:var(--fz4);
font-weight:700;
color:rgba(255,255,255,0.55);
letter-spacing:0.5px;
}
.rpanel-folder-name{
font-size:1.1rem;
font-weight:700;
color:var(--ac3);
padding:0 16px 12px;
}
.rpanel-close-btn{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
padding:0;
border:none;
background:transparent;
color:rgba(255,255,255,0.3);
border-radius:50%;
cursor:pointer;
transition:background 100ms ease,color 100ms ease;
}
.rpanel-close-btn:hover{
color:#fff;
background:rgba(255,255,255,0.1);
}
.rpanel-close-btn svg{
width:22px;
height:22px;
}

/* ── Content area ── */
.rpanel-content{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:12px;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.rpanel-content::-webkit-scrollbar{
width:5px;
}
.rpanel-content::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.1);
border-radius:3px;
}
.rpanel-content .collab-members-list{
max-height:none;
}

/* ── Members redesign ── */
.rpanel-members{
display:flex;
flex-direction:column;
gap:6px;
}
.rpanel-member-card{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:10px;
background:rgba(255,255,255,0.03);
transition:background 120ms ease;
}
.rpanel-member-card:hover{
background:rgba(255,255,255,0.06);
}
.rpanel-avatar{
width:42px;
height:42px;
border-radius:50%;
padding:2px;
flex-shrink:0;
background:rgba(255,255,255,0.1);
}
.rpanel-avatar .collab-member-pic{
width:100%;
height:100%;
border-radius:50%;
}
.rpanel-avatar-owner{
background:linear-gradient(135deg,#a855f7,#7c3aed);
}
.rpanel-avatar-editor{
background:linear-gradient(135deg,#22c55e,#059669);
}
.rpanel-avatar-viewer{
background:rgba(255,255,255,0.1);
}
.rpanel-member-info{
flex:1;
min-width:0;
}
.rpanel-member-name{
display:flex;
align-items:center;
gap:8px;
font-size:var(--fz4);
font-weight:600;
color:var(--cl1);
}
.rpanel-member-email{
font-size:var(--fz5);
color:var(--cl2);
margin-top:2px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.rpanel-role{
font-size:0.65rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
padding:2px 7px;
border-radius:4px;
flex-shrink:0;
white-space:nowrap;
}
.rpanel-role-owner{
background:rgba(168,85,247,0.15);
color:#a855f7;
}
.rpanel-role-editor{
background:rgba(34,197,94,0.15);
color:#22c55e;
}
.rpanel-role-viewer{
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.4);
}
.rpanel-member-actions{
width:100%;
display:flex;
gap:8px;
padding-left:54px;
margin-top:4px;
}
.rpanel-member-card .collab-role-toggle-btn{
padding:5px 12px;
font-size:0.75rem;
border-radius:6px;
}
.rpanel-member-card .collab-kick-btn{
padding:5px 12px;
font-size:0.75rem;
border-radius:6px;
}

/* ── Footer (action buttons) ── */
.rpanel-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:12px 16px;
flex-shrink:0;
}
.rpanel-footer:empty{
display:none;
}
.rpanel-footer .btn{
padding:12px 24px;
border-radius:var(--br0);
font-size:var(--fz4);
font-weight:600;
border:none;
cursor:pointer;
color:#fff;
text-align:center;
transition:background 80ms ease,transform 80ms ease;
}
.rpanel-footer .btn:active{
transform:scale(0.98);
}
.rpanel-footer .btn-primary{
background:var(--ac3);
}
.rpanel-footer .btn-primary:hover{
background:#b96ef5;
}
.rpanel-footer .btn-secondary{
background:#2a2a2a;
}
.rpanel-footer .btn-secondary:hover{
background:#333;
}

/* ── Duplicates view inside rpanel ── */
.rpanel-content .dup-panel-inline{
display:flex;
flex-direction:column;
gap:0;
margin:-12px;
}
.rpanel-content .dup-tabs{
display:flex;
gap:8px;
margin-bottom:0;
padding:12px 12px 12px;
position:sticky;
top:-12px;
background:var(--ooo);
z-index:2;
}
.rpanel-content .dup-threshold-row{
padding:8px 12px;
margin-bottom:0;
position:sticky;
top:32px;
background:var(--ooo);
z-index:1;
}
.rpanel-content .dup-body{
min-height:100px;
max-height:none;
overflow-y:visible;
flex:initial;
padding:8px 12px 12px;
}
.rpanel-footer .dup-quick-actions{
display:flex;
gap:6px;
width:100%;
margin-bottom:4px;
}
.rpanel-footer .dup-quick-btn{
flex:1;
padding:8px 6px;
font-size:0.8rem;
font-weight:600;
border:none;
border-radius:var(--br0);
background:#2a2a2a;
color:rgba(255,255,255,0.7);
cursor:pointer;
transition:background 80ms ease;
}
.rpanel-footer .dup-quick-btn:hover{
background:#333;
color:#fff;
}
.rpanel-footer .dup-delete-btn{
flex:1;
padding:12px 24px;
border-radius:var(--br0);
font-size:var(--fz4);
font-weight:600;
border:none;
cursor:pointer;
color:#fff;
text-align:center;
background:#c53030;
transition:background 80ms ease,transform 80ms ease;
}
.rpanel-footer .dup-delete-btn:hover{
background:#e53e3e;
}

/* ── Trash view inside rpanel ── */
.rpanel-content .collab-trash-body{
max-height:none;
}
.rpanel-footer .collab-trash-restore-all,
.rpanel-footer .collab-trash-purge-all{
flex:1;
padding:12px 24px;
border-radius:var(--br0);
font-size:var(--fz4);
font-weight:600;
border:none;
cursor:pointer;
color:#fff;
text-align:center;
transition:background 80ms ease,transform 80ms ease;
}
.rpanel-footer .collab-trash-restore-all{
background:#2a2a2a;
}
.rpanel-footer .collab-trash-restore-all:hover{
background:#333;
}
.rpanel-footer .collab-trash-purge-all{
background:#c53030;
}
.rpanel-footer .collab-trash-purge-all:hover{
background:#e53e3e;
}

/* ── Invite view inside rpanel ── */
.rpanel-invite-desc{
color:#888;
font-size:var(--fz5);
margin:0 0 16px;
line-height:1.5;
}
.rpanel-invite-link{
display:flex;
gap:8px;
align-items:center;
}
.rpanel-invite-input{
flex:1;
padding:10px 12px;
border-radius:var(--br0);
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.06);
color:#fff;
font-size:var(--fz5);
outline:none;
}
.rpanel-invite-input:focus{
border-color:var(--ac3);
}
.rpanel-invite-copy{
padding:10px 16px;
border:none;
border-radius:var(--br0);
background:var(--ac3);
color:#fff;
font-weight:600;
font-size:var(--fz5);
cursor:pointer;
transition:background 80ms ease;
white-space:nowrap;
}
.rpanel-invite-copy:hover{
background:#b96ef5;
}

/* ── Mobile ── */
@media(max-width:600px){
.rpanel-panel{
width:calc(100vw - var(--gap) * 2);
max-width:400px;
}
.rpanel-backdrop{
background:rgba(0,0,0,0.5);
}
}