diff --git a/index.html b/index.html index b8e38c3..026702b 100644 --- a/index.html +++ b/index.html @@ -132,6 +132,16 @@ label.file-btn{display:inline-block;background:#1a2332;padding:12px 20px;border- label.file-btn:active{background:#2a3342} input[type=file]{display:none} +.ai-helper{position:fixed;bottom:16px;right:16px;z-index:350;width:280px;max-width:90vw;background:var(--ink);border:1px solid #2a3342;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform .3s;display:none} +.ai-helper.show{display:block} +.ai-helper.minimized{transform:translateY(calc(100% - 44px))} +.ai-helper .ai-hdr{background:var(--cyan);color:var(--ink);padding:8px 14px;font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer} +.ai-helper .ai-hdr button{background:none;border:none;color:var(--ink);font-size:16px;cursor:pointer} +.ai-helper .ai-body{padding:10px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px} +.ai-helper .ai-msg{background:#1a2332;color:var(--cyan);padding:6px 10px;border-radius:10px;font-size:12px;line-height:1.4;animation:fadeIn .4s} +@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} + + /* ROLE BUTTONS */ .role-btn{width:100%;padding:16px;background:#1a2332;border:2px solid #2a3342;border-radius:14px;color:var(--white);font-size:18px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s} .role-btn.selected{border-color:var(--cyan);background:rgba(0,229,255,0.08)} @@ -301,6 +311,17 @@ input[type=file]{display:none} + + +