main{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:var(--gap);
}
main.has-results{justify-content:flex-start;flex:0 1 auto;padding-top:0;}
body:has(main.has-results){
min-height:0;
}
main.has-results .input-box{
order:99;
width:100%;
max-width:var(--pw1);
margin-top:24px;
flex-direction:row;
align-items:center;
min-height:0;
cursor:auto;
}
main.has-results .input-actions{display:contents;}
main.has-results .url-input{padding:18px 6px;order:1;flex:1;}
main.has-results .attach-btn{order:0;margin-left:6px;}
main.has-results .analyze-btn{order:2;margin-right:6px;}
main.has-results .toggles{display:none;}
main.has-results~footer{display:none;}
main:not(.has-results) .input-box{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:calc(100% - 32px);
max-width:var(--pw1);
flex-direction:row;
align-items:center;
min-height:0;
cursor:auto;
}
main:not(.has-results) .input-actions{display:contents;}
main:not(.has-results) .url-input{padding:22px 8px;font-size:1.18rem;order:1;flex:1;}
main:not(.has-results) .attach-btn{order:0;margin-left:10px;}
main:not(.has-results) .analyze-btn{order:2;margin-right:10px;}
main:not(.has-results) .attach-btn svg,main:not(.has-results) .analyze-btn svg{width:var(--iz2);height:var(--iz2);}
main:not(.has-results) .composer-previews{
position:fixed;
bottom:calc(50% + 50px);
top:auto;
left:50%;
transform:translateX(-50%);
width:calc(100% - 32px);
max-width:var(--pw1);
margin-bottom:0;
z-index:101;
}
body.kb-up main:not(.has-results) .input-box{
top:auto;
bottom:calc(8px + var(--kb-offset, 0px));
transform:translateX(-50%);
}
body.kb-up main:not(.has-results) .composer-previews{
top:auto;
bottom:calc(80px + var(--kb-offset, 0px));
}
.composer-previews{
display:none;
gap:8px;
flex-wrap:wrap;
margin-bottom:12px;
width:100%;
max-width:var(--pw1);
justify-content:flex-start;
}
.composer-previews.has-items{
display:flex;
}
main.has-results .composer-previews{
order:98;
width:100%;
max-width:var(--pw1);
margin-top:16px;
margin-bottom:0;
padding:0;
pointer-events:none;
}
main.has-results .composer-previews .preview-chip{
pointer-events:auto;
}
.preview-chip{
display:flex;
align-items:center;
gap:8px;
background:var(--bg2);
border:1px solid var(--bg3);
padding:6px 10px;
border-radius:0;
max-width:280px;
box-shadow:var(--bs1);
}
.preview-chip img{
width:36px;
height:36px;
object-fit:cover;
border-radius:0;
}
.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{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
background:var(--bg3);
border:none;
color:var(--cl1);
font-size:0.95rem;
cursor:pointer;
padding:0;
line-height:1;
border-radius:100px;
flex-shrink:0;
}
.chip-remove:hover{
background:var(--ac1);
color:#fff;
}
.input-box{
display:flex;
flex-direction:column;
background:var(--bg3);
border-radius:var(--br0);
width:100%;
max-width:var(--pw1);
cursor:text;
min-height:170px;
}
.input-box.dragover{
background:rgba(240,85,51,0.05);
}
.url-input{
flex:1;
padding:26px 28px 10px 28px;
font-size:1.15rem;
font-family:var(--ff2);
background:none;
border:none;
color:var(--cl1);
outline:none;
min-width:0;
width:100%;
box-sizing:border-box;
}
.url-input::placeholder{
color:var(--cl3);
}
.input-actions{
display:flex;
align-items:center;
gap:4px;
padding:6px 10px 12px 10px;
justify-content:flex-start;
}
.attach-btn{
width:var(--iz1);
height:var(--iz1);
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:none;
border:none;
color:var(--cl3);
cursor:pointer;
transition:background 100ms,color 100ms;
line-height:1;
flex-shrink:0;
border-radius:100px;
}
.attach-btn:hover{
background:var(--bg4);
color:var(--cl1);
}
.analyze-btn{
width:var(--iz1);
height:var(--iz1);
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:none;
border:none;
color:var(--ac1);
font-family:var(--ff2);
cursor:pointer;
transition:background 100ms,color 100ms;
flex-shrink:0;
line-height:1;
border-radius:100px;
}
.analyze-btn:hover{
background:var(--bg4);
color:var(--ac1-light);
}
.analyze-btn:disabled{
opacity:0.3;
cursor:not-allowed;
}
.web-toggle{
width:var(--iz1);
height:var(--iz1);
display:none;
align-items:center;
justify-content:center;
padding:0;
background:none;
border:none;
color:var(--cl3);
cursor:pointer;
border-radius:100px;
transition:background 100ms,color 100ms;
flex-shrink:0;
order:0;
}
main:has(.results > .result-card) .web-toggle{
display:flex;
}
.web-toggle:hover{
background:var(--bg4);
color:var(--cl1);
}
.web-toggle.active{
color:var(--ac1);
background:rgba(240,85,51,0.1);
}
.web-toggle.active:hover{
color:var(--ac1);
background:rgba(240,85,51,0.18);
}
.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-family:var(--ff2);
text-align:center;
transition:color 100ms;
}
.toggle-track{
position:relative;
width:100%;
height:36px;
background:var(--bg3);
border:none;
border-radius:var(--br0);
cursor:pointer;
}
.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:100px;
transition:left 100ms cubic-bezier(0.25,0.1,0.25,1),box-shadow 100ms;
pointer-events:none;
box-shadow:var(--bs2);
}
.toggle-track[data-value="1"] .toggle-thumb{
left:calc(100% - 36px);
}
.toggle-track input{
display:none;
}
.input-box.readonly{display:none;}
.composer-previews.readonly{display:none;}
body:has(.result-card.streaming) .input-box,body:has(.result-card .phase-loading) .input-box{display:none;}
body:has(.result-card.streaming) .composer-previews,body:has(.result-card .phase-loading) .composer-previews{display:none;}
body:has(.result-card.streaming) .composer-quote,body:has(.result-card .phase-loading) .composer-quote{display:none;}
.composer-quote{
display:none;
width:100%;
max-width:var(--pw1);
margin-bottom:8px;
}
.composer-quote.has-quote{
display:flex;
align-items:flex-start;
gap:8px;
background:var(--bg2);
border-left:3px solid var(--ac1);
padding:10px 12px 10px 14px;
font-family:var(--ff1);
font-size:0.92rem;
line-height:1.45;
color:var(--cl1);
border-radius:6px;
}
.composer-quote-text{
flex:1;
min-width:0;
white-space:pre-wrap;
word-break:break-word;
max-height:120px;
overflow-y:auto;
}
.composer-quote-remove{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
background:var(--bg3);
border:none;
color:var(--cl1);
cursor:pointer;
padding:0;
line-height:1;
border-radius:100px;
flex-shrink:0;
margin-top:1px;
}
.composer-quote-remove:hover{background:var(--ac1);color:#fff;}
main.has-results .composer-quote{order:97;margin-top:16px;margin-bottom:0;}
main:not(.has-results) .composer-quote{
position:fixed;
bottom:calc(50% + 110px);
left:50%;
transform:translateX(-50%);
width:calc(100% - 32px);
max-width:var(--pw1);
margin-bottom:0;
z-index:101;
}
body.kb-up main:not(.has-results) .composer-quote{
bottom:calc(140px + var(--kb-offset, 0px));
}
.outlook-connect-wrap{display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px;background:rgba(0,120,215,0.08);border:1px solid rgba(0,120,215,0.3);border-radius:8px;margin:8px 0;font-family:var(--font-sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif);}
.outlook-connect-msg{font-size:13px;color:var(--text-muted);text-align:center;font-family:inherit;}
.outlook-connect-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.btn-skip-outlook{background:#0078d4;color:#fff;border:0;padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer;font-size:13px;font-family:inherit;}
.btn-skip-outlook:hover{background:#106ebe;}
.btn-connect-outlook{background:transparent;color:var(--text-muted);border:0;padding:4px 8px;cursor:pointer;font-size:12px;text-decoration:underline;font-family:inherit;}
.btn-connect-outlook:hover{color:var(--text);}