main{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:var(--gap);
}
main.has-results{
justify-content:flex-start;
padding-top:40px;
}
main.has-results .composer{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
width:calc(100% - 32px);
max-width:var(--pw1);
z-index:100;
box-shadow:var(--box);
}
main.has-results .toggles{
display:none;
}
main.has-results~footer{
display:none;
}
.composer-previews{
display:none;
gap:8px;
flex-wrap:wrap;
margin-bottom:12px;
width:100%;
max-width:var(--pw1);
}
.composer-previews.has-items{
display:flex;
}
.preview-chip{
display:flex;
align-items:center;
gap:8px;
background:var(--bg3);
padding:6px 10px;
max-width:280px;
}
.preview-chip img{
width:36px;
height:36px;
object-fit:cover;
}
.chip-icon{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.15rem;
background:var(--bg3);
}
.chip-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
}
.chip-name{
font-size:0.8rem;
color:var(--cl1);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chip-meta{
font-size:0.7rem;
color:var(--cl3);
}
.chip-remove{
background:none;
border:none;
color:var(--cl3);
font-size:1.15rem;
cursor:pointer;
padding:0 4px;
line-height:1;
}
.chip-remove:hover{
color:var(--ac1);
}
.composer{
width:100%;
max-width:var(--pw1);
display:flex;
align-items:center;
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:100px;
padding:0;
box-shadow:var(--box);
transition:border-color 100ms;
}
.composer:focus-within{
border-color:var(--ac1);
}
.composer.dragover{
border-color:var(--ac1);
background:rgba(240,85,51,0.05);
}
.attach-btn{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:4Px;
background:none;
border:none;
color:var(--cl3);
cursor:pointer;
font-size:1.15rem;
transition:background 100ms,color 100ms;
line-height:1;
flex-shrink:0;
border-radius:50px;
}
.attach-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.url-input{
flex:1;
padding:16px 12px;
font-size:1.15rem;
font-family:var(--ff2);
background:none;
border:none;
color:var(--cl1);
outline:none;
min-width:0;
}
.url-input::placeholder{
color:var(--cl3);
}
.analyze-btn{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:4px;
background:none;
border:none;
color:var(--ac1);
font-size:1.4rem;
font-weight:600;
font-family:var(--ff2);
cursor:pointer;
transition:background 100ms,color 100ms;
flex-shrink:0;
line-height:1;
border-radius:50px;
}
.analyze-btn:hover{
background:var(--bg3);
color:var(--ac1-light);
}
.analyze-btn:disabled{
opacity:0.3;
cursor:not-allowed;
}
.toggles{
display:flex;
gap:40px;
justify-content:center;
margin-top:18px;
width:100%;
max-width:var(--pw1);
}
.toggle-group{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
flex:1;
max-width:70px;
}
.toggle-label{
font-size:0.75rem;
color:var(--cl1);
font-weight:600;
font-family:var(--ff2);
text-align:center;
transition:color 100ms;
}
.toggle-track{
position:relative;
width:100%;
height:36px;
background:var(--bg3);
border:1px solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
transition:border-color 100ms;
}
.toggle-track:hover{
border-color:var(--cl3);
}
.toggle-thumb{
position:absolute;
top:50%;
left:-4px;
transform:translateY(-50%);
width:40px;
height:40px;
background:var(--ac1);
border-radius:50%;
transition:left 100ms cubic-bezier(0.25,0.1,0.25,1),box-shadow 100ms;
pointer-events:none;
box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.toggle-track[data-value="1"] .toggle-thumb{
left:calc(100% - 36px);
}
.toggle-track input{
display:none;
}