.status-ai-wrap{
position:relative;
}
.status-ai-btn{
width:var(--pbz);
height:var(--pbz);
background:rgba(255,255,255,0.06);
border:var(--bt1) solid rgba(255,255,255,0.12);
border-radius:50%;
color:rgba(255,255,255,0.45);
cursor:pointer;
transition:all 100ms ease;
display:flex;
align-items:center;
justify-content:center;
padding:0;
flex-shrink:0;
}
.status-ai-btn svg{
width:20px;
height:20px;
display:block;
flex-shrink:0;
}
.status-ai-btn:hover,
.status-ai-btn.active{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.22);
color:rgba(255,255,255,0.8);
}
.status-ai-btn:active{
transform:scale(0.92);
}
.status-ai-btn.processing{
pointer-events:none;
animation:ai-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-pulse{
0%,100%{color:rgba(255,255,255,0.45);border-color:rgba(255,255,255,0.12);}
50%{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.3);}
}
.ai-menu{
position:fixed;
background:var(--panel-bg);
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
padding:6px;
min-width:200px;
display:none;
z-index:9999;
box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.ai-menu button{
width:100%;
height:auto;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:none;
border:none;
border-radius:8px;
color:rgba(255,255,255,0.7);
font-size:var(--fz5);
font-weight:500;
cursor:pointer;
transition:background 100ms ease;
white-space:nowrap;
}
.ai-menu button:hover{
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.95);
}
.ai-menu button svg{
width:16px;
height:16px;
flex-shrink:0;
opacity:0.6;
}
.ai-menu button:hover svg{
opacity:1;
}
.ai-result-overlay{
position:relative;
z-index:10;
display:flex;
flex-direction:column;
min-height:300px;
height:100%;
max-height:calc(100vh - var(--gap,26px) * 2);
overflow:hidden;
background:var(--panel-bg);
border-radius:inherit;
}
.ai-result-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px;
border-bottom:1px solid rgba(255,255,255,0.08);
flex-shrink:0;
}
.ai-result-header-left{
display:flex;
align-items:center;
gap:16px;
}
.ai-result-header-right{
display:flex;
align-items:center;
gap:8px;
}
.ai-result-title{
font-size:var(--fz4);
font-weight:700;
color:rgba(255,255,255,0.8);
letter-spacing:0.3px;
}
.ai-result-body{
flex:1;
overflow-y:auto;
padding:var(--gap);
font-size:var(--fz2);
color:rgba(255,255,255,0.82);
line-height:1.65;
white-space:pre-wrap;
word-break:break-word;
user-select:text;
-webkit-user-select:text;
cursor:text;
}
.ai-result-body ul{
margin:0;
padding:0 0 0 20px;
}
.ai-result-body li{
margin:6px 0;
}
.ai-result-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:20px 24px;
}
.ai-result-tag{
display:inline-flex;
align-items:center;
padding:6px 14px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.1);
border-radius:20px;
color:rgba(255,255,255,0.8);
font-size:var(--fz5);
font-weight:600;
}
.ai-result-footer{
display:flex;
align-items:center;
gap:8px;
padding:12px 16px;
border-top:1px solid rgba(255,255,255,0.08);
flex-shrink:0;
}
.ai-result-btn{
padding:10px 20px;
border-radius:var(--br0,10px);
font-size:var(--fz5);
font-weight:600;
cursor:pointer;
border:none;
transition:all 100ms ease;
}
.ai-result-btn.primary{
background:rgba(255,255,255,0.1);
color:rgba(255,255,255,0.9);
}
.ai-result-btn.primary:hover{
background:rgba(255,255,255,0.18);
}
.ai-result-btn.secondary{
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.6);
}
.ai-result-btn.secondary:hover{
background:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.85);
}
.ai-result-switch-btn{
padding:4px 12px;
border:1px solid rgba(255,255,255,0.12);
border-radius:var(--br0,10px);
font-size:var(--fz5);
font-weight:600;
cursor:pointer;
transition:all 100ms ease;
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.5);
white-space:nowrap;
width:auto;
height:auto;
}
.ai-result-switch-btn:hover{
color:rgba(255,255,255,0.85);
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.22);
}