diff --git a/index.html b/index.html index 55deed4..0008647 100644 --- a/index.html +++ b/index.html @@ -105,6 +105,16 @@ input[type=file]{display:none} .app-screen.active{display:block} .profile-screen.hidden,#loginScreen.hidden{display:none} + +.ai-helper{position:fixed;bottom:16px;right:16px;z-index:350;width:300px;max-width:90vw;background:var(--ink);border:1px solid #2a3342;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.4);transition:transform .3s} +.ai-helper.minimized{transform:translateY(calc(100% - 48px))} +.ai-helper .ai-header{background:var(--cyan);color:var(--ink);padding:10px 14px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer} +.ai-helper .ai-header button{background:none;border:none;color:var(--ink);font-size:18px;cursor:pointer;padding:0 4px} +.ai-helper .ai-body{padding:12px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px} +.ai-helper .ai-msg{background:#1a2332;color:#9aa3b2;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;max-width:90%;animation:fadeIn .4s} +.ai-helper .ai-msg.user{background:var(--cyan);color:var(--ink);align-self:flex-end;text-align:right} +@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} + @media(max-width:480px){ .grid2{grid-template-columns:1fr} header h1{font-size:16px} @@ -133,6 +143,16 @@ input[type=file]{display:none} + +