/* ---------- Free AI Studio: chat, image, voice, text tools, files ---------- */
.aipanel{display:none}
.aipanel.on{display:block}

/* shared form controls, matching the dialog input style used elsewhere on the site */
.aiform textarea,.aiimgform input,.aiimgform select,.aivoiceform textarea,.aivrow select,
.aitextform textarea,.aitextopts select,.aitextopts input,.aibgform select{
  font:inherit;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px
}
.aiform textarea:focus,.aiimgform input:focus,.aiimgform select:focus,.aivoiceform textarea:focus,.aivrow select:focus,
.aitextform textarea:focus,.aitextopts select:focus,.aitextopts input:focus,.aibgform select:focus{
  outline:2px solid var(--lime);outline-offset:1px
}

/* chat (also reused by Document Chat) */
.aichat{display:flex;flex-direction:column;height:min(66vh,620px);border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.aimsgs{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.aimsg{display:flex}
.aimsg.user{justify-content:flex-end}
.aimsg .bub{max-width:78%;padding:12px 16px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.aimsg.bot .bub{background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.aimsg.user .bub{background:var(--lime);color:var(--lime-ink);border-bottom-right-radius:4px;font-weight:600}
.aimsg.typing .bub{display:flex;gap:5px;align-items:center;padding:15px 18px}
.aimsg.typing .bub i{width:6px;height:6px;border-radius:50%;background:var(--mute);display:block;animation:aidot 1s ease-in-out infinite}
.aimsg.typing .bub i:nth-child(2){animation-delay:.15s}.aimsg.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.aiform{display:flex;gap:10px;align-items:flex-end;padding:14px;border-top:1px solid var(--line);background:var(--panel2)}
.aiform textarea{flex:1;resize:none;max-height:120px;background:var(--bg)}
.aiform button{flex:none}
.aiform button:disabled{opacity:.5;cursor:default}

/* image */
.aiimgform{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.aiimgform input{flex:1;min-width:240px}
.aiimggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.aiimgcard{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel2)}
.aiimgcard img{width:100%;height:100%;display:block;object-fit:cover;background:var(--panel2)}
.aiimgcard.loading img{opacity:0}
.aiimgcard.loading:after{content:"";position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--lime);animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.aiimgcard .aiimgp{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:12px;color:var(--ink);background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);opacity:0;transition:.25s}
.aiimgcard:hover .aiimgp{opacity:1}
.aiimgcard.err .aiimgp{opacity:1;background:rgba(0,0,0,.75);color:var(--mute)}
.aiimgcard .aiimgdl{position:absolute;right:10px;top:10px;z-index:2;background:rgba(13,14,15,.6);backdrop-filter:blur(6px);color:var(--ink);border-radius:99px;padding:5px 12px;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:.25s}
.aiimgcard:hover .aiimgdl{opacity:1}
.aiimgcard .aiimgdl:hover{background:var(--lime);color:var(--lime-ink)}

/* voice */
.aivoiceform{display:grid;gap:16px;max-width:680px}
.aivrow{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.aivrow select{min-width:200px}
.aivrow label{display:flex;gap:9px;align-items:center;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.aivrow input[type=range]{accent-color:var(--lime)}

#aivmode,#aitabs{margin-bottom:20px}
.aivoiceform .acts button:disabled,.aiimgform button:disabled,.aibgform button:disabled{opacity:.5;cursor:default}

.ainote{color:var(--mute);font-size:13px;margin-top:16px}

/* text tools: summarizer, translator, code helper, grammar */
.aitextform{display:flex;flex-direction:column;gap:12px}
.aitextform textarea{width:100%;resize:vertical;line-height:1.55}
.aitextopts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aitextopts select{flex:none}
.aitextopts button{margin-left:auto}
.aioutbox{position:relative;margin-top:18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);line-height:1.6;font-size:14.5px}
.aioutbox .aioutbody{white-space:pre-wrap;word-break:break-word;padding-right:70px}
.aioutbox.mono .aioutbody{font-family:var(--mono);font-size:13px}
.aicopybtn{position:absolute;top:12px;right:12px;background:var(--panel);border:1px solid var(--line);color:var(--mute);border-radius:8px;padding:5px 10px;font-size:11px;cursor:pointer;font-family:var(--mono)}
.aicopybtn:hover{color:var(--ink);border-color:var(--ink)}
.aicopybtn.done{color:var(--lime);border-color:var(--lime)}

/* background remover, file converter (shared image-in / image-out layout) */
.aibgform{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.aifilebtn{cursor:pointer;display:inline-block}
.aicvqlabel{display:flex;gap:9px;align-items:center;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.aicvqlabel input[type=range]{accent-color:var(--lime)}
.aibgresult{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.aibgcol{display:flex;flex-direction:column;gap:8px}
.aibgcol span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.aibgcol img{width:100%;min-height:120px;border-radius:12px;border:1px solid var(--line);object-fit:contain;background:repeating-conic-gradient(#242727 0 25%,#1a1d1e 0 50%) 0 0/18px 18px}

/* document chat load row */
#aipdfchat{margin-top:16px}

@media (max-width:640px){
  .aichat{height:min(70vh,560px)}
  .aimsg .bub{max-width:90%}
  .aibgresult{grid-template-columns:1fr}
  .aitextopts button{margin-left:0}
}