Cloud
Claude is responding
Uploaded image

Ran a command, searched the web
Ran a command, searched the web
Świetnie — teraz widzę całość i muszę Cię poprawić w jednym punkcie: plik jest na serwerze i działa. Sprawdziłem na żywo:

https://cleanvisions.ai/nexus.html → działa, jest po angielsku, nowa wersja.

To nie jest WordPress/Elementor. To Hostinger, public_html, zwykłe pliki — i tam Twój nexus.html (64,67 KiB, wgrany 5 minut temu) leży jak trzeba. Pomyliłem trop przez to 404 wcześniej, przepraszam — teraz mamy fakty.

Problem jest inny i prostszy, niż myśleliśmy: to są dwa różne adresy.

Adres	Co tam siedzi
cleanvisions.ai/nexus.html	plik — nowa wersja EN ✅
cleanvisions.ai/nexus/	podstrona WordPressa — stary polski kod wklejony w Elementorze
Wpisujesz /nexus/, dostajesz stronę WP, i widzisz polską wersję. Plik nie ma z tym nic wspólnego.

Najlepszy ruch — i tu jest sztuczka warta zapamiętania:

W public_html utwórz folder o nazwie nexus, a do środka wrzuć plik pod nazwą index.html.

Apache zawsze najpierw sprawdza, czy istnieje prawdziwy plik lub folder — i dopiero jak nie istnieje, oddaje sprawę WordPressowi. Więc od momentu, gdy ten folder powstanie, cleanvisions.ai/nexus/ zacznie serwować Twoją aplikację, a podstrona WP po prostu zejdzie z drogi. Twoje linki w reklamach zostają bez zmian. Nic nie kasujesz — strona WP dalej istnieje, tylko przestaje być widoczna pod tym adresem. Chcesz cofnąć? Kasujesz folder i wraca stare.

Kroki w Menedżerze plików:

public_html → Nowy folder → nazwa: nexus
Wejdź do niego → Prześlij → wybierz najnowszy plik ode mnie
Zmień mu nazwę na index.html
cleanvisions.ai/nexus/ → Ctrl+Shift+R
Na dole strony ma być v2.0 EN
Uwaga: ten plik, który wgrałeś (66 222 bajty), to wersja sprzed znacznika wersji — dlatego nie znajdziesz na niej v2.0 EN. Weź najnowszy (66 361 bajtów), żebyś zawsze wiedział, co stoi na serwerze.

A skoro robisz reklamy EN + PL + SE — widzę u Ciebie nexus_pl.html i nexus_se.html w tym samym folderze. Ta sama sztuczka daje Ci czystą strukturę pod kampanie:

public_html/nexus/index.html      → cleanvisions.ai/nexus/     (EN)
public_html/nexus/pl/index.html   → cleanvisions.ai/nexus/pl/  (PL)
public_html/nexus/se/index.html   → cleanvisions.ai/nexus/se/  (SE)
Trzy osobne adresy do trzech osobnych zestawów reklam, każdy z własnym pixelem, jeśli zechcesz. Powiedz słowo, a zrobię wersję PL i SE z tego samego pliku — te same funkcje, przetłumaczone napisy, gotowe do wrzucenia w te foldery.

mam 3 adresy ale teraz mowimy o  tym [Nexus - CelanVisions](https://cleanvisions.ai/nexus/)   i był angielski tu ma za duzo tesktu dalje i jest po polsku . zrob prosty ładyn okoenko aby buł wikoczy tekst jak klinet bedzie pisał to jest najawzejesz nie kolory i bajery czy reklamy . na kompoterze wyglada ok ale w moim telefonie widzialem wszysdzie napisa ale nie mialem okenka aby zadac pytania i wkleic zdjecia bi nie było miejsca a mam duozy eknam samsu s/24

Rozumiem. Robię odwrotnie niż dotąd: okienko do pisania jest bohaterem, reszta znika.


Ran 4 commands, read 3 files, used a tool



Ran 4 commands, read 3 files, used a tool
Zrobione — v2.1 EN. Wywaliłem całą ścianę tekstu.

Co widzi klient po wejściu na telefonie:

„ASK NEXUS" + jedna linijka „Send a photo of the floor, or type your question below. Any language." — i tyle. Reszta ekranu to puste miejsce na rozmowę. Żadnych akapitów sprzedażowych, żadnego „Read more", żadnych chipsów.

Okienko do pisania:

Wyższe (64 px zamiast 52) i z grubszą, jaśniejszą ramką — od razu widać, gdzie się pisze
Placeholder skrócony do Ask in any language… — mieści się w jednej linii, nic się nie ucina
Przycisk wysyłania powiększony do 64 px
Tekst 17 px, biały, na ciemniejszym tle — kontrast w górę
Przygasiłem gwiazdy pod tekstem o 45%, żeby nie migotały pod literami
Cztery szybkie pytania zwinąłem z dwóch rzędów kafli do jednego przewijanego rzędu — zajmują 40 px zamiast 90 i klient może je zignorować.

Sprawdziłem na wymiarach Twojego S24 (384×832): okienko pisania startuje na 668 px, cała belka z przyciskami i stopka mieszczą się nad krawędzią. Przetestowałem też z otwartą klawiaturą (symulacja 384×420) — okienko dalej jest widoczne, nic nie ucieka pod klawiaturę. Dołożyłem interactive-widget=resizes-content, dzięki czemu Android sam przycina layout, gdy klawiatura wjeżdża. Odblokowałem też pinch-zoom, bo poprzednia wersja go blokowała.

Wersja w stopce: v2.1 EN — po wgraniu na to patrz, żeby wiedzieć, czy serwer podaje nowy plik.

I najważniejsze, bo tu tkwi Twój problem: to, co widzisz pod cleanvisions.ai/nexus/, to nie ten plik. Tam siedzi stara polska wersja wklejona w podstronę WordPressa. Możesz mi wgrywać dziesiątą poprawkę, a ten adres dalej pokaże to samo. Zrób ten folder — public_html/nexus/ + plik jako index.html — i dopiero wtedy zobaczysz efekt pod właściwym adresem.


Nexus
Code · HTML 
Uploaded image
Message collapsed

Thought process
Thought process
Stop, nie poddawaj się — mam

Writing… · 24s

You’ve used 75% of your weekly limit
Get more usage




Claude is AI and can make mistakes. Please double-check responses. Give us feedback


Nexus · HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
<title>NEXUS — CleanVisions AI</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;600;700;800&family=Barlow:wght@300;400;500;600&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<!-- ElevenLabs Conversational AI SDK — preloaded at page start -->
<script type="module">
  try {
    const { Conversation } = await import('https://esm.sh/@elevenlabs/client');
    window._ELConversation = Conversation;
    console.log('[NEXUS] Voice SDK ready ✓');
  } catch(e) {
    console.warn('[NEXUS] Voice SDK preload failed:', e);
  }
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --accent:#00c8f0;--accent2:#7b61ff;--green:#00ffb3;
  --dark:#03070f;--deep:#000408;
  --border:rgba(0,200,240,0.15);
  --text:#e8f5ff;--text2:#7aaccc;--warn:#ff6b35;
  --fs:17px;            /* rozmiar tekstu rozmowy — sterowany A+ / A- */
  --safe-b:env(safe-area-inset-bottom,0px);
}
html,body{width:100%;height:100%;min-height:100dvh;background:var(--deep);overflow:hidden;font-family:'Barlow',sans-serif;color:var(--text);-webkit-text-size-adjust:100%;}
 
/* ═══ INTRO ═══════════════════════════════════════════════════════ */
#intro{
  position:fixed;inset:0;z-index:1000;
  background:var(--deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity 1.2s ease;min-height:100dvh;cursor:pointer;
}
#intro.out{opacity:0;pointer-events:none;}
#intro-canvas{position:absolute;inset:0;width:100%;height:100%;}
#skip{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:30;
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(0,200,240,0.6);border:1px solid rgba(0,200,240,0.3);background:rgba(0,4,8,0.6);
  padding:9px 16px;border-radius:20px;cursor:pointer;
}
.i-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(0,200,240,0.1);transform:translate(-50%,-50%);
  animation:ringEx 3.6s ease-out infinite;
}
.i-ring:nth-child(2){animation-delay:1.2s;}
.i-ring:nth-child(3){animation-delay:2.4s;}
@keyframes ringEx{
  0%{width:60px;height:60px;opacity:0.6;border-color:rgba(0,200,240,0.5);}
  100%{width:130vw;height:130vw;opacity:0;border-color:rgba(0,200,240,0);}
}
.i-content{
  position:relative;z-index:2;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 18px;
}
.i-eyebrow{
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:6px;
  color:rgba(0,200,240,0.45);text-transform:uppercase;
  opacity:0;animation:fadeUp 0.7s ease 5.6s forwards;
}
.i-logo{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(80px,15vw,180px);font-weight:800;letter-spacing:0.14em;
  text-transform:uppercase;
  background:linear-gradient(135deg,#00c8f0 0%,#7b61ff 45%,#00ffb3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 50px rgba(0,200,240,0.7)) drop-shadow(0 0 100px rgba(123,97,255,0.4));
  opacity:0;transform:scale(0.25) translateY(30px);
  animation:logoBlast 1.3s cubic-bezier(0.12,1,0.3,1) 5.0s forwards;
}
.i-sub{
  font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:5px;
  color:rgba(0,200,240,0.38);text-transform:uppercase;
  opacity:0;animation:fadeUp 0.7s ease 6.0s forwards;
}
.i-tagline{
  font-size:16px;color:rgba(232,245,255,0.5);letter-spacing:0.5px;
  max-width:420px;line-height:1.6;
  opacity:0;animation:fadeUp 0.7s ease 6.5s forwards;
}
.i-line{
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  opacity:0;animation:lineGrow 1s ease 6.9s forwards;
}
@keyframes logoBlast{
  0%{opacity:0;transform:scale(0.2) translateY(40px);}
  65%{opacity:1;transform:scale(1.06) translateY(-4px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes lineGrow{from{width:0;opacity:0;}to{width:340px;opacity:1;}}
 
/* ═══ THOUGHT DROP ═══════════════════════════════════════════════ */
#thought-drop{
  position:absolute;left:50%;top:-90px;
  width:50px;height:70px;z-index:20;
  filter:drop-shadow(0 0 20px rgba(123,97,255,1)) drop-shadow(0 0 50px rgba(0,200,240,0.75));
  animation:thoughtFall 2.4s cubic-bezier(0.4,0,0.3,1) 0.4s both;
}
@keyframes thoughtFall{
  0%  {top:-90px;transform:translateX(-50%) scaleY(1)   scaleX(1);   opacity:0.8;}
  32% {top:calc(50% - 36px);transform:translateX(-50%) scaleY(0.62) scaleX(1.32);opacity:1;}
  41% {top:calc(50% - 56px);transform:translateX(-50%) scaleY(1.28) scaleX(0.78);opacity:1;}
  50% {top:calc(50% - 36px);transform:translateX(-50%) scaleY(0.88) scaleX(1.06);opacity:1;}
  72% {top:calc(50% - 36px);transform:translateX(-50%) scaleY(1)   scaleX(1);   opacity:0.4;}
  100%{top:50%;transform:translateX(-50%) scaleY(0)   scaleX(0);   opacity:0;}
}
.t-ripple{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid rgba(123,97,255,0.9);
  width:0;height:0;opacity:0;
  animation:tRipple 1.2s cubic-bezier(0.1,0.8,0.4,1) both;
}
.t-ripple:nth-child(1){animation-delay:2.5s;border-color:rgba(123,97,255,0.9);}
.t-ripple:nth-child(2){animation-delay:2.75s;border-color:rgba(0,200,240,0.65);}
.t-ripple:nth-child(3){animation-delay:3.0s;border-color:rgba(0,255,179,0.4);}
@keyframes tRipple{0%{width:0;height:0;opacity:1;}100%{width:380px;height:380px;opacity:0;}}
 
.i-thought{position:absolute;left:50%;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;}
#itext1{
  top:11%;transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(9px,1.8vw,12px);letter-spacing:5px;
  color:rgba(0,200,240,0.5);text-transform:uppercase;
  animation:ithoughtIn 1.4s ease 3.3s both;
}
#itext2{
  top:17%;transform:translateX(-50%);
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,3.8vw,28px);font-weight:700;letter-spacing:1.5px;
  background:linear-gradient(90deg,#00ffb3,#00c8f0,#7b61ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(123,97,255,0.7));
  animation:ithoughtIn 1.6s cubic-bezier(0.22,1,0.36,1) 4.0s both;
}
@keyframes ithoughtIn{
  from{opacity:0;transform:translateX(-50%) translateY(18px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}
 
/* ═══ APP ══════════════════════════════════════════════════════════ */
#app{
  position:fixed;inset:0;z-index:100;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  height:100dvh;background:var(--deep);
  opacity:0;transition:opacity 1s ease;overflow:hidden;
}
#app>*{min-width:0;max-width:100%;}
#app.on{opacity:1;}
#bg-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.55;}
.neb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:1;animation:nebDrift 22s ease-in-out infinite;}
.neb1{width:700px;height:450px;background:radial-gradient(ellipse,rgba(123,97,255,0.07) 0%,transparent 70%);top:-120px;right:-100px;}
.neb2{width:500px;height:320px;background:radial-gradient(ellipse,rgba(0,200,240,0.05) 0%,transparent 70%);bottom:-60px;left:-60px;animation-delay:-9s;}
@keyframes nebDrift{0%,100%{transform:translate(0,0);}50%{transform:translate(25px,-18px);}}
 
/* ═══ HEADER ═══════════════════════════════════════════════════════ */
#hdr{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px)) 12px 0;height:calc(52px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--border);
  background:rgba(2,5,14,0.9);backdrop-filter:blur(22px);flex-shrink:0;
}
.hdr-brand{display:flex;align-items:center;gap:12px;}
.hdr-logo{
  font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;letter-spacing:5px;
  background:linear-gradient(90deg,#00c8f0,#7b61ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(0,200,240,0.4);text-transform:uppercase;
}
.hdr-sep{width:1px;height:18px;background:var(--border);}
.hdr-sub{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:rgba(0,200,240,0.28);text-transform:uppercase;}
.hdr-center{display:flex;align-items:center;gap:8px;}
.h-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.5s ease-in-out infinite;}
.h-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(0,255,179,0.45);text-transform:uppercase;}
@keyframes blink{0%,100%{opacity:0.4;}50%{opacity:1;}}
.hdr-right{display:flex;gap:6px;align-items:center;}
.h-btn{
  width:38px;height:38px;border:1px solid var(--border);background:rgba(0,200,240,0.05);
  color:var(--accent);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;
}
.h-btn:hover{background:rgba(0,200,240,0.14);border-color:var(--accent);}
.h-btn svg{width:17px;height:17px;}
.only-mob{display:none;}
 
/* ═══ VOICE LIVE BAR ════════════════════════════════════════════ */
#voice-bar{
  display:none;width:100%;
  background:rgba(0,255,179,0.07);
  border:1px solid rgba(0,255,179,0.45);
  border-radius:10px;
  padding:9px 10px 9px 14px;
  align-items:center;gap:10px;
  animation:vbarIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
  margin-bottom:2px;
}
#voice-bar.on{display:flex;}
@keyframes vbarIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.vbar-dot{
  width:10px;height:10px;border-radius:50%;background:#00ffb3;
  box-shadow:0 0 10px #00ffb3;flex-shrink:0;
  animation:vdotPulse 1s ease-in-out infinite;
}
@keyframes vdotPulse{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
.vbar-txt{flex:1;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;color:rgba(0,255,179,0.9);text-transform:uppercase;}
#vstop{
  background:rgba(255,60,60,0.18);border:1px solid rgba(255,80,80,0.65);
  color:#ff7070;font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
  padding:9px 16px;border-radius:20px;cursor:pointer;transition:all 0.2s;
}
#vstop:hover{background:rgba(255,60,60,0.35);border-color:#ff4444;color:#fff;}
 
/* ═══ MESSAGES ══════════════════════════════════════════════════════ */
#msgs-wrap{position:relative;z-index:5;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,200,240,0.1) transparent;}
#msgs-wrap::-webkit-scrollbar{width:3px;}
#msgs-wrap::-webkit-scrollbar-thumb{background:rgba(0,200,240,0.13);}
#msgs{display:flex;flex-direction:column;gap:0;padding:10px 0 14px;}
.mrow{width:100%;display:flex;animation:rowIn 0.38s cubic-bezier(0.16,1,0.3,1);}
@keyframes rowIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.mrow.user{justify-content:flex-end;background:transparent;}
.mrow.user .inner{display:flex;align-items:flex-start;gap:10px;flex-direction:row-reverse;padding:10px 14px 10px 40px;max-width:80%;}
.mrow.ai{justify-content:flex-start;background:rgba(0,200,240,0.022);border-top:1px solid rgba(0,200,240,0.06);border-bottom:1px solid rgba(0,200,240,0.06);}
.mrow.ai .inner{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 16px 14px;width:100%;max-width:100%;}
.mrow.welcome{background:transparent;border:none;}
.mrow.welcome .inner{padding:14px 16px 6px;flex-direction:column;gap:6px;}
.whint{font-size:15px;line-height:1.6;color:#7aaccc;}
.wt{font-family:'Barlow Condensed',sans-serif;font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:0.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--green) 0%,var(--accent) 60%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(0,255,179,0.3));line-height:1.05;}
.ws{font-size:16px;color:#a8cfe4;line-height:1.65;max-width:70ch;}
.ws p{margin:0 0 10px;}
.ws p:last-child{margin:0;}
.wmore{display:none;}
.wmore.open{display:block;}
.wbtn{
  align-self:flex-start;background:rgba(0,200,240,0.07);border:1px solid rgba(0,200,240,0.3);
  color:var(--accent);font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;padding:9px 16px;border-radius:20px;cursor:pointer;transition:all 0.2s;
}
.wbtn:hover{background:rgba(0,200,240,0.16);border-color:var(--accent);}
.wtags{display:flex;flex-wrap:wrap;gap:6px;}
.wtags span{
  font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(0,255,179,0.75);background:rgba(0,255,179,0.06);
  border:1px solid rgba(0,255,179,0.28);border-radius:14px;padding:5px 11px;white-space:nowrap;
}
.wh{font-size:11px;color:rgba(0,200,240,0.35);font-style:italic;font-family:'Share Tech Mono',monospace;letter-spacing:1px;}
 
/* ═══ AVATARS ═══════════════════════════════════════════════════════ */
.av{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible;}
.av-user{background:radial-gradient(circle at 38% 32%,rgba(123,97,255,0.55) 0%,rgba(0,200,240,0.25) 100%);border:1.5px solid rgba(123,97,255,0.5);box-shadow:0 0 18px rgba(123,97,255,0.3);}
.av-ai{background:radial-gradient(circle at 38% 32%,rgba(0,200,240,0.5) 0%,rgba(123,97,255,0.35) 60%,rgba(0,255,179,0.1) 100%);border:1.5px solid rgba(0,200,240,0.5);box-shadow:0 0 22px rgba(0,200,240,0.3),0 0 50px rgba(0,200,240,0.1);animation:avPulse 4s ease-in-out infinite;}
@keyframes avPulse{0%,100%{box-shadow:0 0 22px rgba(0,200,240,0.3),0 0 50px rgba(0,200,240,0.1);}50%{box-shadow:0 0 32px rgba(0,200,240,0.5),0 0 70px rgba(0,200,240,0.18);}}
 
/* ═══ BUBBLES ═══════════════════════════════════════════════════════ */
.mbody{flex:1;min-width:0;}
.mlabel{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;opacity:0.45;margin-bottom:5px;}
.user .mlabel{color:var(--accent2);text-align:right;}
.ai .mlabel{color:var(--accent);}
.bubble{font-size:var(--fs);line-height:1.65;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;max-width:74ch;}
.user .bubble{background:rgba(123,97,255,0.18);border:1px solid rgba(123,97,255,0.4);color:#f5eeff;padding:11px 16px;border-radius:12px 2px 12px 12px;font-weight:400;}
.ai .bubble{background:transparent;border:none;color:#e4f2ff;padding:0;font-weight:400;}
.bubble.md{white-space:normal;}
.bubble h1,.bubble h2,.bubble h3,.bubble h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:#00c8f0;margin:16px 0 6px;letter-spacing:1px;text-transform:uppercase;line-height:1.15;}
.bubble h1{font-size:calc(var(--fs) + 5px);} .bubble h2{font-size:calc(var(--fs) + 3px);} .bubble h3{font-size:calc(var(--fs) + 1px);color:#7b61ff;}
.bubble h1:first-child,.bubble h2:first-child,.bubble h3:first-child{margin-top:0;}
.bubble p{margin:0 0 10px;}
.bubble p:last-child{margin:0;}
.bubble ul,.bubble ol{margin:6px 0 12px;padding-left:22px;}
.bubble li{margin-bottom:6px;}
.bubble a{color:#00ffb3;text-decoration:underline;text-underline-offset:3px;}
.bubble a:hover{color:#00c8f0;}
.bubble strong{color:#fff;font-weight:600;}
.bubble hr{border:none;border-top:1px solid rgba(0,200,240,0.18);margin:14px 0;}
.bubble pre{background:rgba(0,200,240,0.07);border:1px solid rgba(0,200,240,0.18);border-radius:6px;padding:10px 12px;margin:8px 0 12px;overflow-x:auto;}
.bubble pre code{background:none;padding:0;color:#9fe8ff;font-size:0.82em;line-height:1.5;}
.bubble code{background:rgba(0,200,240,0.1);padding:2px 6px;border-radius:3px;font-family:'Share Tech Mono',monospace;font-size:0.86em;color:#00c8f0;}
.msg-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.msg-thumbs img{width:88px;height:88px;object-fit:cover;border-radius:6px;border:1px solid rgba(0,200,240,0.25);cursor:pointer;}
 
/* ═══ MULTI-FILE STRIP ══════════════════════════════════════════════ */
#file-strip{display:none;position:relative;z-index:6;margin:0 12px 8px;padding:10px;background:rgba(0,200,240,0.045);border:1px solid rgba(0,200,240,0.22);border-radius:8px;animation:rowIn 0.3s ease;}
#file-strip.active{display:block;}
.fs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.fs-count{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;}
.fs-clear{background:none;border:none;color:var(--text2);font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-decoration:underline;}
.fs-clear:hover{color:#ff6b6b;}
.fs-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;-webkit-overflow-scrolling:touch;}
.fs-item{position:relative;flex-shrink:0;width:72px;}
.fs-item img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid rgba(0,200,240,0.3);display:block;}
.fs-item .doc{width:72px;height:72px;border-radius:6px;background:rgba(123,97,255,0.14);border:1px solid rgba(123,97,255,0.35);display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;color:var(--accent2);}
.fs-item .nm{font-size:9px;color:var(--text2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fs-item .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:rgba(4,10,20,0.95);border:1px solid rgba(255,80,80,0.6);color:#ff7070;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.fs-add{flex-shrink:0;width:72px;height:72px;border-radius:6px;border:1px dashed rgba(0,200,240,0.4);background:rgba(0,200,240,0.04);color:var(--accent);font-size:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.fs-add:hover{background:rgba(0,200,240,0.12);}
.fs-warn{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--warn);margin-top:8px;}
 
/* ═══ QUICK ACTIONS ═════════════════════════════════════════════════ */
#quick{display:flex;flex-wrap:nowrap;gap:6px;padding:4px 12px 8px;z-index:5;position:relative;overflow-x:auto;scrollbar-width:none;}
#quick::-webkit-scrollbar{display:none;}
.qb{flex:0 0 auto;white-space:nowrap;background:rgba(0,200,240,0.05);border:1px solid rgba(0,200,240,0.2);color:var(--accent);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:1.1px;text-transform:uppercase;padding:10px 10px;cursor:pointer;text-align:center;border-radius:3px;transition:all 0.22s;}
.qb:hover{background:rgba(0,200,240,0.15);border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,200,240,0.13);}
 
/* ═══ INPUT ZONE ════════════════════════════════════════════════════ */
#inp{position:relative;z-index:10;flex-shrink:0;border-top:1px solid var(--border);background:rgba(2,5,14,0.94);backdrop-filter:blur(22px);padding:10px 12px calc(10px + var(--safe-b));}
.iwrap{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:8px;}
.irow1{display:flex;gap:8px;align-items:flex-end;}
#ta{
  flex:1;background:rgba(0,26,54,0.9);border:2px solid rgba(0,200,240,0.45);
  color:#fff;font-family:'Barlow',sans-serif;font-size:17px;line-height:1.55;
  padding:14px 16px;resize:none;min-height:64px;max-height:200px;outline:none;border-radius:10px;
  transition:border-color 0.22s,box-shadow 0.22s;
}
#ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,200,240,0.12);background:rgba(0,30,62,0.95);}
#ta::placeholder{color:rgba(140,190,220,0.55);}
.sbtn{width:64px;height:64px;min-width:64px;background:linear-gradient(135deg,rgba(0,200,240,0.34) 0%,rgba(123,97,255,0.3) 100%);border:1.5px solid rgba(0,200,240,0.6);color:var(--accent);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.22s;flex-shrink:0;}
.sbtn:hover{background:linear-gradient(135deg,rgba(0,200,240,0.5) 0%,rgba(123,97,255,0.42) 100%);border-color:var(--accent);box-shadow:0 0 22px rgba(0,200,240,0.22);}
.sbtn:active{transform:scale(0.95);}
.sbtn:disabled{opacity:0.28;cursor:not-allowed;transform:none;}
.sbtn svg{width:22px;height:22px;}
 
.irow2{display:flex;gap:8px;align-items:center;}
.tool{
  height:46px;padding:0 14px;border-radius:8px;
  background:rgba(0,200,240,0.06);border:1.5px solid rgba(0,200,240,0.28);
  color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:all 0.2s;flex-shrink:0;
}
.tool:hover{background:rgba(0,200,240,0.16);border-color:var(--accent);}
.tool svg{width:19px;height:19px;flex-shrink:0;}
.tool.has-file{border-color:var(--green);color:var(--green);background:rgba(0,255,179,0.1);}
.tool .badge{background:var(--green);color:#001a12;font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;}
 
/* ── DUŻY PRZYCISK GŁOSU ── */
#vbtn{
  flex:0 0 auto;height:46px;min-width:240px;padding:0 22px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,rgba(0,255,179,0.16) 0%,rgba(0,200,240,0.14) 100%);
  border:2px solid rgba(0,255,179,0.55);
  color:var(--green);
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 0 18px rgba(0,255,179,0.14);
  white-space:nowrap;
}
#vbtn svg{width:24px;height:24px;flex-shrink:0;}
#vbtn:hover{background:linear-gradient(135deg,rgba(0,255,179,0.28) 0%,rgba(0,200,240,0.22) 100%);box-shadow:0 0 28px rgba(0,255,179,0.3);}
#vbtn:active{transform:scale(0.97);}
#vbtn.vlive{
  background:linear-gradient(135deg,rgba(255,60,60,0.3) 0%,rgba(255,120,40,0.22) 100%);
  border-color:#ff5555;color:#ffb3b3;
  animation:vPulseRing 1.6s ease-in-out infinite;
}
@keyframes vPulseRing{
  0%,100%{box-shadow:0 0 0 0 rgba(255,60,60,0.35),0 0 22px rgba(255,60,60,0.35);}
  50%{box-shadow:0 0 0 8px rgba(255,60,60,0.06),0 0 40px rgba(255,60,60,0.5);}
}
#vbtn.vwait{opacity:0.55;pointer-events:none;}
 
/* ═══ FOOTER / DISCLAIMER ══════════════════════════════════════════ */
#foot{
  margin:8px auto 0;max-width:1300px;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:9.5px;line-height:1.5;letter-spacing:0.6px;
  color:rgba(122,172,204,0.5);
}
#foot b{color:rgba(0,200,240,0.6);font-weight:400;}
#foot #ver{color:rgba(0,255,179,0.45);}
 
/* ═══ MENU SHEET ════════════════════════════════════════════════════ */
#sheet-bg{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,2,6,0.65);backdrop-filter:blur(3px);}
#sheet-bg.on{display:block;}
#sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:9001;
  background:rgba(3,8,18,0.98);border-top:1px solid rgba(0,200,240,0.3);
  border-radius:16px 16px 0 0;padding:14px 14px calc(18px + var(--safe-b));
  transform:translateY(102%);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 -10px 40px rgba(0,0,0,0.6);
}
#sheet.on{transform:translateY(0);}
.sheet-title{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:3px;color:rgba(0,200,240,0.4);text-transform:uppercase;text-align:center;margin-bottom:12px;}
.sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.sitem{
  display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:8px;
  background:rgba(0,200,240,0.05);border:1px solid rgba(0,200,240,0.2);
  color:var(--text);font-family:'Barlow',sans-serif;font-size:15px;font-weight:500;cursor:pointer;text-align:left;
}
.sitem:hover{background:rgba(0,200,240,0.14);border-color:var(--accent);}
.sitem svg{width:19px;height:19px;stroke:var(--accent);flex-shrink:0;}
.sitem.danger{border-color:rgba(255,80,80,0.3);color:#ffbcbc;}
.sitem.danger svg{stroke:#ff7070;}
.sheet-close{width:100%;margin-top:10px;padding:14px;border-radius:8px;background:rgba(0,200,240,0.09);border:1px solid rgba(0,200,240,0.25);color:var(--accent);font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;}
.fs-row{display:flex;gap:8px;align-items:center;grid-column:1/-1;padding:10px 14px;border-radius:8px;background:rgba(123,97,255,0.06);border:1px solid rgba(123,97,255,0.22);}
.fs-row .lbl{flex:1;font-size:14px;color:var(--text2);}
.fs-row button{width:44px;height:38px;border-radius:6px;background:rgba(0,200,240,0.09);border:1px solid rgba(0,200,240,0.3);color:var(--accent);font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;cursor:pointer;}
.fs-row button:hover{background:rgba(0,200,240,0.2);}
 
/* ═══ THINKING ══════════════════════════════════════════════════════ */
.thinking{display:flex;align-items:center;gap:14px;padding:2px 0;}
.t-dots{display:flex;gap:7px;align-items:center;}
.t-d{width:9px;height:9px;border-radius:50%;opacity:0.35;animation:tBounce 1.4s ease-in-out infinite;}
.t-d:nth-child(1){background:var(--accent);}
.t-d:nth-child(2){background:var(--accent2);animation-delay:0.2s;}
.t-d:nth-child(3){background:var(--green);animation-delay:0.4s;}
@keyframes tBounce{0%,80%,100%{transform:translateY(0);opacity:0.3;}40%{transform:translateY(-9px);opacity:1;}}
.t-txt{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:rgba(0,200,240,0.4);animation:tPulse 2s ease-in-out infinite;}
@keyframes tPulse{0%,100%{opacity:0.25;}50%{opacity:0.7;}}
.scan{position:absolute;bottom:0;left:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);animation:scanRun 1.8s ease-in-out infinite;}
@keyframes scanRun{0%{width:0;opacity:0;left:0;}50%{width:55%;opacity:1;}100%{width:100%;opacity:0;left:0;}}
 
/* ═══ LIGHTBOX ══════════════════════════════════════════════════════ */
#lbox{display:none;position:fixed;inset:0;z-index:9500;background:rgba(0,2,6,0.93);align-items:center;justify-content:center;padding:20px;}
#lbox.on{display:flex;}
#lbox img{max-width:100%;max-height:88vh;border-radius:8px;border:1px solid rgba(0,200,240,0.3);}
 
/* ═══ PRINT ═════════════════════════════════════════════════════════ */
@media print{
  #intro,#quick,#inp,.hdr-right,#bg-canvas,.neb,#file-strip,#voice-bar,#sheet,#sheet-bg,#lbox,.wbtn{display:none!important;}
  #app{position:static!important;height:auto!important;overflow:visible!important;opacity:1!important;background:#fff!important;display:block!important;}
  #hdr{background:#fff!important;border-bottom:2px solid #00c8f0!important;height:auto!important;padding:8px 0!important;}
  .hdr-logo{-webkit-text-fill-color:#0c4a6e!important;color:#0c4a6e!important;}
  #msgs-wrap{overflow:visible!important;}
  .mrow.ai{background:#f5faff!important;border-color:#e0f2fe!important;break-inside:avoid;}
  .user .bubble{background:#e0e7ff!important;color:#1e1b4b!important;border-color:#c7d2fe!important;}
  .ai .bubble{color:#0c4a6e!important;}
  .wt{-webkit-text-fill-color:#065f46!important;color:#065f46!important;}
  .ws{color:#334155!important;}
  .wmore{display:block!important;}
  .bubble{max-width:100%!important;}
}
 
/* ═══ MOBILE ════════════════════════════════════════════════════════ */
@media(max-width:700px){
  :root{--fs:17px;}
  .only-mob{display:flex;}
  .only-desk{display:none!important;}
  .hdr-sub,.hdr-sep{display:none;}
  .hdr-center .h-label{display:none;}
  .mrow.user .inner{padding:8px 12px 8px 14px;max-width:94%;}
  .mrow.ai .inner{padding:14px 12px;gap:10px;}
  .mrow.welcome .inner{padding:14px 12px 8px;}
  .wt{font-size:clamp(21px,6.6vw,30px);}
  .ws{font-size:15.5px;line-height:1.6;}
  .av{width:34px;height:34px;}
  .qb{font-size:12px;padding:8px 12px;}
  #file-strip{margin:0 10px 6px;}
  #ta{font-size:17px;min-height:64px;}
  .tool{padding:0 12px;font-size:13px;}
  .tool .tool-txt{display:none;}
  .tool{width:50px;padding:0;}
  #vbtn{flex:1 1 auto;min-width:0;padding:0 12px;font-size:15px;letter-spacing:2px;}
  #itext1,#itext2{white-space:normal;width:92vw;text-align:center;}
  #voice-bar{padding:8px 10px;}
  .vbar-txt{font-size:10px;letter-spacing:1px;}
  .sheet-grid{grid-template-columns:1fr;}
}
</style>
</head>
<body>
<input type="file" id="nx-file" accept=".pdf,.doc,.docx,image/*" multiple style="display:none">
<input type="file" id="nx-cam" accept="image/*" capture="environment" style="display:none">
 
<!-- ═══ INTRO ═══ -->
<div id="intro" onclick="killIntro()">
  <canvas id="intro-canvas"></canvas>
  <button id="skip" onclick="killIntro()">Skip &rsaquo;&rsaquo;</button>
  <div class="i-ring"></div>
  <div class="i-ring"></div>
  <div class="i-ring"></div>
  <div id="thought-drop">
    <svg viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="tdg" cx="37%" cy="27%" r="65%">
          <stop offset="0%"   stop-color="#ffffff" stop-opacity="0.97"/>
          <stop offset="16%"  stop-color="#e0d7ff"/>
          <stop offset="40%"  stop-color="#7b61ff"/>
          <stop offset="68%"  stop-color="#00c8f0"/>
          <stop offset="100%" stop-color="#06004a"/>
        </radialGradient>
      </defs>
      <path d="M26 1 C26 1, 51 35, 51 48 C51 62 40.2 71 26 71 C11.8 71 1 62 1 48 C1 35 26 1 26 1Z" fill="url(#tdg)"/>
      <ellipse cx="35" cy="27" rx="8" ry="12" fill="rgba(255,255,255,0.38)" transform="rotate(-25 35 27)"/>
      <ellipse cx="31" cy="20" rx="3.5" ry="5.5" fill="rgba(255,255,255,0.65)" transform="rotate(-25 31 20)"/>
    </svg>
  </div>
  <div class="t-ripple"></div>
  <div class="t-ripple"></div>
  <div class="t-ripple"></div>
  <div id="itext1" class="i-thought">// while your competition runs on guesswork</div>
  <div id="itext2" class="i-thought">What you don't know is costing you right now.</div>
 
  <div class="i-content">
    <div class="i-eyebrow">// CleanVisions AI &mdash; Intelligence Layer</div>
    <div class="i-logo">NEXUS</div>
    <div class="i-sub">Not a tool. Not training. A different dimension of operating.</div>
    <div class="i-line"></div>
    <div class="i-tagline">The unfair advantage your competition doesn't have access to.</div>
  </div>
</div>
 
<!-- ═══ LIGHTBOX ═══ -->
<div id="lbox" onclick="this.classList.remove('on')"><img id="lboxImg" src="" alt=""></div>
 
<!-- ═══ APP ═══ -->
<div id="app">
  <canvas id="bg-canvas"></canvas>
  <div class="neb neb1"></div>
  <div class="neb neb2"></div>
 
  <!-- HEADER -->
  <div id="hdr">
    <div class="hdr-brand">
      <div class="hdr-logo">NEXUS</div>
      <div class="hdr-sep"></div>
      <div class="hdr-sub">// CleanVisions AI</div>
    </div>
    <div class="hdr-center">
      <div class="h-dot"></div>
      <div class="h-label">Online &mdash; Neural Core Active</div>
    </div>
    <div class="hdr-right">
      <!-- desktop: pełny zestaw -->
      <button class="h-btn only-desk" title="Copy conversation" onclick="copyChat()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      </button>
      <button class="h-btn only-desk" title="Print / PDF" onclick="printChat()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
      </button>
      <button class="h-btn only-desk" title="New session" onclick="newSession()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <button class="h-btn only-desk" title="Clear chat" onclick="clearChat()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
      </button>
      <!-- zawsze: menu (na telefonie tu są wszystkie funkcje) -->
      <button class="h-btn" title="Menu" onclick="openSheet()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
    </div>
  </div>
 
  <!-- MESSAGES -->
  <div id="msgs-wrap"><div id="msgs"></div></div>
 
  <!-- MULTI-FILE STRIP -->
  <div id="file-strip">
    <div class="fs-head">
      <div class="fs-count" id="fsCount">0 / 5 files</div>
      <button class="fs-clear" onclick="clearFiles()">Remove all</button>
    </div>
    <div class="fs-list" id="fsList"></div>
    <div class="fs-warn" id="fsWarn">⚠ Add a short description or question — required to send photos.</div>
  </div>
 
  <!-- QUICK ACTIONS -->
  <div id="quick">
    <button class="qb" onclick="qs('What mistakes are costing cleaning companies the most money right now — and how do I avoid them?')">Where am I losing money?</button>
    <button class="qb" onclick="qs('I am starting a new cleaning contract. What do I need to know to protect myself from costly mistakes from day one?')">Protect my next contract</button>
    <button class="qb" onclick="qs('What does my competition not know that I should? Give me a real competitive edge in the cleaning and facility management industry.')">Edge over competition</button>
    <button class="qb" onclick="qs('What is the most dangerous blind spot in the cleaning industry that causes companies to lose clients, face claims, or damage floors?')">The blind spot that kills deals</button>
  </div>
  <!-- INPUT -->
  <div id="inp">
    <div class="iwrap">
      <div id="voice-bar">
  <div class="vbar-dot"></div>
  <div class="vbar-txt">NEXUS Voice &mdash; Live</div>
  <button id="vstop" onclick="stopVoice()">&#9632; End</button>
</div>
      <div class="irow1">
        <textarea id="ta" placeholder="Ask in any language…" rows="1" onkeydown="onKey(event)" oninput="grow(this)"></textarea>
        <button class="sbtn" id="sbtn" onclick="send()" title="Send">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </div>
      <div class="irow2">
        <button class="tool" id="attachBtn" title="Add photos / files (up to 5)" onclick="pickFiles()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
          <span class="tool-txt">Photos</span><span class="badge" id="attBadge" style="display:none">0</span>
        </button>
        <button class="tool" title="Take a photo" onclick="document.getElementById('nx-cam').click()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          <span class="tool-txt">Camera</span>
        </button>
        <button id="vbtn" title="Voice chat with NEXUS — start / stop" onclick="toggleVoice()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          <span id="vbtnLabel">Start voice</span>
        </button>
      </div>
    </div>
    <div id="foot">
      <b>AI can make mistakes</b> &nbsp;·&nbsp; verify critical decisions &nbsp;·&nbsp; no personal data stored &nbsp;·&nbsp; <span id="ver">v2.1 EN</span>
    </div>
  </div>
</div>
 
<!-- ═══ MENU SHEET ═══ -->
<div id="sheet-bg" onclick="closeSheet()"></div>
<div id="sheet">
  <div class="sheet-title">// NEXUS &mdash; Tools</div>
  <div class="sheet-grid">
    <button class="sitem" onclick="closeSheet();pickFiles()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
      Add photos / files
    </button>
    <button class="sitem" onclick="closeSheet();document.getElementById('nx-cam').click()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
      Take a photo
    </button>
    <button class="sitem" onclick="closeSheet();copyChat()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      Copy conversation
    </button>
    <button class="sitem" onclick="closeSheet();pasteToInput()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
      Paste into box
    </button>
    <button class="sitem" onclick="closeSheet();printChat()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
      Print / save as PDF
    </button>
    <button class="sitem" onclick="closeSheet();toggleVoice()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
      <span id="sheetVoiceLabel">Start voice</span>
    </button>
    <div class="fs-row">
      <div class="lbl">Text size</div>
      <button onclick="fontStep(-1)">A&minus;</button>
      <button onclick="fontStep(1)">A+</button>
    </div>
    <button class="sitem" onclick="closeSheet();newSession()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      New session
    </button>
    <button class="sitem danger" onclick="closeSheet();clearChat()">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
      Clear chat
    </button>
  </div>
  <button class="sheet-close" onclick="closeSheet()">Close</button>
</div>
 
<script>
/* ══════════════════════════════════════════════════════════════════
   KONFIGURACJA — NIE ZMIENIAĆ bez potrzeby
   ══════════════════════════════════════════════════════════════════ */
console.log('%c[NEXUS] build v2.1-EN','color:#00ffb3');
const N8N_URL = 'https://jarekwai.app.n8n.cloud/webhook/229c9ae2-ed70-4ce1-b22a-newnexsus';
const ELEVENLABS_AGENT_ID = 'agent_0301kjc92vvgfz7v1yg3mj2mzzqr';
const MAX_FILES = 5;                    // ile zdjęć naraz
const MAX_FILE_MB = 10;                 // limit na jeden plik
const V_MAX_MS = 180000;                // twardy limit sesji głosowej (3 min) — ochrona kredytów
 
let busy = false;
let pendingFiles = [];                  // [{base64,type,name,size,dataUrl}]
 
/* ─── INTRO STAR CANVAS ─────────────────────────────────────── */
(function(){
  const cv=document.getElementById('intro-canvas');
  const ctx=cv.getContext('2d');
  let W,H,stars=[],frame=0,raf;
  function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
  function mkStars(){
    stars=[];
    for(let i=0;i<380;i++){
      const angle=Math.random()*Math.PI*2;
      const dist=Math.random()*Math.max(W,H)*0.7+40;
      stars.push({x:W/2+Math.cos(angle)*dist,y:H/2+Math.sin(angle)*dist,angle,dist,r:Math.random()*1.8+0.2,op:Math.random()*0.6+0.2,tw:Math.random()*Math.PI*2,ts:Math.random()*0.03+0.01,col:Math.random()>0.8?(Math.random()>0.5?'0,200,240':'123,97,255'):'200,225,255'});
    }
  }
  function draw(){
    ctx.clearRect(0,0,W,H);ctx.fillStyle='#000408';ctx.fillRect(0,0,W,H);
    const cx=W/2,cy=H/2;
    stars.forEach(s=>{
      s.tw+=s.ts;const flicker=0.5+0.5*Math.sin(s.tw);
      const progress=Math.min(frame/90,1);const ease=1-Math.pow(1-progress,3);
      const sx=cx+Math.cos(s.angle)*s.dist*ease;const sy=cy+Math.sin(s.angle)*s.dist*ease;
      if(progress<0.98){const prevX=cx+Math.cos(s.angle)*s.dist*(ease-0.04);const prevY=cy+Math.sin(s.angle)*s.dist*(ease-0.04);const streakLen=s.dist*0.04*progress;if(streakLen>1){const grad=ctx.createLinearGradient(prevX,prevY,sx,sy);grad.addColorStop(0,`rgba(${s.col},0)`);grad.addColorStop(1,`rgba(${s.col},${flicker*0.7*progress})`);ctx.strokeStyle=grad;ctx.lineWidth=s.r*0.6;ctx.beginPath();ctx.moveTo(prevX,prevY);ctx.lineTo(sx,sy);ctx.stroke();}}
      ctx.beginPath();ctx.arc(sx,sy,s.r*flicker,0,Math.PI*2);ctx.fillStyle=`rgba(${s.col},${flicker*s.op})`;ctx.fill();
    });
    frame++;raf=requestAnimationFrame(draw);
    if(document.getElementById('intro').classList.contains('out'))cancelAnimationFrame(raf);
  }
  window.addEventListener('resize',()=>{resize();mkStars();});
  resize();mkStars();draw();
})();
 
/* ─── APP BG CANVAS ──────────────────────────────────────────── */
(function(){
  const cv=document.getElementById('bg-canvas');
  const ctx=cv.getContext('2d');let W,H,stars=[];
  function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
  function mkStars(){stars=[];const n=innerWidth<700?150:280;for(let i=0;i<n;i++)stars.push({x:Math.random()*W,y:Math.random()*H,r:Math.random()*2.2+0.2,tw:Math.random()*Math.PI*2,ts:Math.random()*0.025+0.006,op:Math.random()*0.55+0.15,vx:(Math.random()-0.5)*0.08,vy:(Math.random()-0.5)*0.06,col:Math.random()>0.82?(Math.random()>0.5?'0,200,240':'123,97,255'):(Math.random()>0.5?'0,255,179':'200,225,255'),shoot:Math.random()<0.012,shootT:Math.random()*1000});}
  function draw(){
    ctx.fillStyle='rgba(0,4,8,0.18)';ctx.fillRect(0,0,W,H);
    stars.forEach(s=>{
      s.tw+=s.ts;const f=0.5+0.5*Math.sin(s.tw);
      s.x+=s.vx;s.y+=s.vy;
      if(s.x<-4)s.x=W+4;if(s.x>W+4)s.x=-4;if(s.y<-4)s.y=H+4;if(s.y>H+4)s.y=-4;
      if(s.r>1.5&&f>0.85){ctx.beginPath();ctx.arc(s.x,s.y,s.r*3,0,Math.PI*2);ctx.fillStyle=`rgba(${s.col},${f*0.04})`;ctx.fill();}
      ctx.beginPath();ctx.arc(s.x,s.y,s.r*f,0,Math.PI*2);ctx.fillStyle=`rgba(${s.col},${f*s.op})`;ctx.fill();
      if(s.shoot){s.shootT--;if(s.shootT<=0){const len=80+Math.random()*120;const ang=-0.4+Math.random()*0.2;const grad=ctx.createLinearGradient(s.x,s.y,s.x+Math.cos(ang)*len,s.y+Math.sin(ang)*len);grad.addColorStop(0,`rgba(${s.col},0.9)`);grad.addColorStop(1,`rgba(${s.col},0)`);ctx.strokeStyle=grad;ctx.lineWidth=1.2;ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.lineTo(s.x+Math.cos(ang)*len,s.y+Math.sin(ang)*len);ctx.stroke();s.shootT=300+Math.random()*900;}}
    });
    requestAnimationFrame(draw);
  }
  window.addEventListener('resize',()=>{resize();mkStars();});
  resize();mkStars();draw();
})();
 
/* ─── INTRO: auto 9 s LUB kliknięcie / „Pomiń" ─────────────── */
let introKilled=false;
function killIntro(){
  if(introKilled)return; introKilled=true;
  const intro=document.getElementById('intro');
  intro.classList.add('out');
  setTimeout(()=>{intro.style.display='none';},1300);
  document.getElementById('app').classList.add('on');
  addWelcome();
}
setTimeout(killIntro,9000);
 
/* ─── SVG AVATARS ────────────────────────────────────────────── */
function clientSVG(){return `<svg viewBox="0 0 46 46" width="38" height="38" fill="none"><defs><radialGradient id="cg" cx="38%" cy="32%"><stop offset="0%" stop-color="rgba(123,97,255,0.7)"/><stop offset="100%" stop-color="rgba(0,200,240,0.3)"/></radialGradient></defs><circle cx="23" cy="23" r="22" fill="url(#cg)" stroke="rgba(123,97,255,0.55)" stroke-width="1.2"/><circle cx="23" cy="23" r="14" fill="rgba(3,8,22,0.7)" stroke="rgba(123,97,255,0.35)" stroke-width="0.8"/><text x="23" y="29" text-anchor="middle" font-family="Barlow Condensed,sans-serif" font-size="22" font-weight="800" fill="rgba(123,97,255,0.9)">?</text></svg>`;}
function nexusSVG(){return `<svg viewBox="0 0 46 46" width="38" height="38" fill="none"><defs><radialGradient id="ng2" cx="38%" cy="30%"><stop offset="0%" stop-color="rgba(0,220,255,0.8)"/><stop offset="55%" stop-color="rgba(100,80,200,0.55)"/><stop offset="100%" stop-color="rgba(0,255,180,0.2)"/></radialGradient><radialGradient id="eg2" cx="50%" cy="50%"><stop offset="0%" stop-color="#ffffff"/><stop offset="35%" stop-color="#00c8f0"/><stop offset="100%" stop-color="#1a1060"/></radialGradient></defs><circle cx="23" cy="23" r="22" fill="url(#ng2)" stroke="rgba(0,200,240,0.55)" stroke-width="1.2"/><ellipse cx="23" cy="22" rx="12" ry="13" fill="rgba(3,8,22,0.88)" stroke="rgba(0,200,240,0.22)" stroke-width="0.8"/><rect x="11" y="17" width="24" height="8" rx="4" fill="rgba(0,200,240,0.12)" stroke="rgba(0,200,240,0.55)" stroke-width="0.9"/><ellipse cx="23" cy="21" rx="7" ry="3" fill="url(#eg2)" opacity="0.92"/><circle cx="23" cy="21" r="1.5" fill="#ffffff"/><rect x="18" y="31" width="10" height="3" rx="1.2" fill="rgba(0,200,240,0.28)"/><line x1="11" y1="19" x2="5" y2="15" stroke="rgba(0,200,240,0.55)" stroke-width="0.9"/><line x1="11" y1="22" x2="5" y2="22" stroke="rgba(0,200,240,0.4)" stroke-width="0.9"/><circle cx="5" cy="15" r="1.5" fill="rgba(0,200,240,0.8)"/><circle cx="5" cy="22" r="1.5" fill="rgba(123,97,255,0.8)"/><line x1="35" y1="19" x2="41" y2="15" stroke="rgba(0,200,240,0.55)" stroke-width="0.9"/><line x1="35" y1="22" x2="41" y2="22" stroke="rgba(0,200,240,0.4)" stroke-width="0.9"/><circle cx="41" cy="15" r="1.5" fill="rgba(0,200,240,0.8)"/><circle cx="41" cy="22" r="1.5" fill="rgba(0,255,179,0.8)"/><line x1="23" y1="9" x2="23" y2="3" stroke="rgba(0,200,240,0.7)" stroke-width="1"/><circle cx="23" cy="3" r="1.8" fill="rgba(0,200,240,0.9)"/></svg>`;}
 
/* ─── DOM REFS ────────────────────────────────────────────────── */
const msgs=document.getElementById('msgs');
const ta=document.getElementById('ta');
const sbtn=document.getElementById('sbtn');
const strip=document.getElementById('file-strip');
const fsList=document.getElementById('fsList');
const fsCount=document.getElementById('fsCount');
const fsWarn=document.getElementById('fsWarn');
const attachBtn=document.getElementById('attachBtn');
const attBadge=document.getElementById('attBadge');
const fileInput=document.getElementById('nx-file');
const camInput=document.getElementById('nx-cam');
 
/* ─── PLIKI: WIELE ZDJĘĆ ──────────────────────────────────────── */
function pickFiles(){fileInput.click();}
fileInput.addEventListener('change',e=>{intake(e.target.files);fileInput.value='';});
camInput.addEventListener('change',e=>{intake(e.target.files);camInput.value='';});
 
function intake(fileList){
  const arr=[...fileList];
  if(!arr.length)return;
  let skipped=0;
  arr.forEach(f=>{
    if(pendingFiles.length>=MAX_FILES){skipped++;return;}
    if(f.size>MAX_FILE_MB*1024*1024){skipped++;return;}
    const reader=new FileReader();
    reader.onload=ev=>{
      const dataUrl=ev.target.result;
      pendingFiles.push({base64:dataUrl.split(',')[1],type:f.type,name:f.name,size:f.size,dataUrl});
      renderStrip();
    };
    reader.readAsDataURL(f);
  });
  if(skipped)setTimeout(()=>alert('Skipped '+skipped+' file(s). Limit: '+MAX_FILES+' files, max '+MAX_FILE_MB+' MB each.'),300);
  ta.focus();
}
 
function renderStrip(){
  fsList.innerHTML='';
  pendingFiles.forEach((f,i)=>{
    const it=document.createElement('div');it.className='fs-item';
    const isImg=f.type.startsWith('image/');
    it.innerHTML=(isImg
        ? `<img src="${f.dataUrl}" alt="">`
        : `<div class="doc">${(f.name.split('.').pop()||'FILE').toUpperCase()}</div>`)
      + `<div class="nm">${escAttr(f.name)}</div>`
      + `<div class="x" title="Remove">✕</div>`;
    it.querySelector('.x').onclick=()=>{pendingFiles.splice(i,1);renderStrip();};
    if(isImg)it.querySelector('img').onclick=()=>showLbox(f.dataUrl);
    fsList.appendChild(it);
  });
  if(pendingFiles.length<MAX_FILES){
    const add=document.createElement('div');add.className='fs-add';add.textContent='+';add.title='Add more';
    add.onclick=pickFiles;fsList.appendChild(add);
  }
  const n=pendingFiles.length;
  fsCount.textContent=n+' / '+MAX_FILES+' files';
  strip.classList.toggle('active',n>0);
  attachBtn.classList.toggle('has-file',n>0);
  attBadge.style.display=n>0?'inline-block':'none';
  attBadge.textContent=n;
  fsWarn.style.color='var(--warn)';
  fsWarn.textContent='⚠ Add a short description or question — required to send photos.';
  if(n>0)ta.placeholder='Describe the photo…';
  else ta.placeholder='Ask in any language…';
}
function clearFiles(){pendingFiles=[];renderStrip();}
function showLbox(src){document.getElementById('lboxImg').src=src;document.getElementById('lbox').classList.add('on');}
 
/* ─── CZAT ───────────────────────────────────────────────────── */
function addWelcome(){
  const row=document.createElement('div');row.className='mrow welcome';
  row.innerHTML=`<div class="inner">
    <div class="wt">Ask NEXUS</div>
    <div class="whint">Send a photo of the floor, or type your question below.<br>Any language.</div>
  </div>`;
  msgs.appendChild(row);scrollBot();
}
function toggleMore(){}
function addUser(text,images){
  const row=document.createElement('div');row.className='mrow user';
  let content=esc(text);
  if(images&&images.length){
    content+='<div class="msg-thumbs">'+images.map(src=>`<img src="${src}" alt="attachment">`).join('')+'</div>';
  }
  row.innerHTML=`<div class="inner"><div class="av av-user">${clientSVG()}</div><div class="mbody"><div class="mlabel">You</div><div class="bubble">${content}</div></div></div>`;
  msgs.appendChild(row);
  row.querySelectorAll('.msg-thumbs img').forEach(im=>im.onclick=()=>showLbox(im.src));
  document.getElementById('quick').style.display='none';scrollBot();
}
function addThinking(){
  const row=document.createElement('div');row.className='mrow ai';row.id='trow';row.style.position='relative';
  row.innerHTML=`<div class="inner" style="position:relative"><div class="av av-ai">${nexusSVG()}</div><div class="mbody"><div class="mlabel">NEXUS</div><div class="thinking"><div class="t-dots"><div class="t-d"></div><div class="t-d"></div><div class="t-d"></div></div><div class="t-txt" id="ttxt">Processing query…</div></div></div><div class="scan"></div></div>`;
  msgs.appendChild(row);scrollBot();
  const phrases=['Processing query…','Analyzing context…','Constructing response…','Syncing neural core…','Accessing knowledge base…'];
  let ti=0;return setInterval(()=>{ti=(ti+1)%phrases.length;const el=document.getElementById('ttxt');if(el)el.textContent=phrases[ti];},800);
}
function removeThinking(interval){clearInterval(interval);const t=document.getElementById('trow');if(t)t.remove();}
 
function addAI(text){
  const row=document.createElement('div');row.className='mrow ai';
  row.innerHTML=`<div class="inner"><div class="av av-ai">${nexusSVG()}</div><div class="mbody"><div class="mlabel">NEXUS</div><div class="bubble"></div></div></div>`;
  msgs.appendChild(row);scrollBot();
  const bbl=row.querySelector('.bubble');
  // efekt pisania — szybszy przy długich odpowiedziach, potem czysty markdown
  const step=text.length>900?6:(text.length>400?3:1);
  let i=0;
  (function type(){
    if(i<text.length){
      i=Math.min(i+step,text.length);
      bbl.textContent=text.slice(0,i);
      scrollBot();
      setTimeout(type,text.length>900?8:Math.random()*12+5);
    }else{
      bbl.classList.add('md');
      bbl.innerHTML=md(text);
      bbl.querySelectorAll('a').forEach(a=>{a.target='_blank';a.rel='noopener';});
      scrollBot();
    }
  })();
}
 
/* mini-markdown: nagłówki, listy, pogrubienia, kod, linki — parser liniowy */
function inl(s){
  s=s.replace(/`([^`\n]+)`/g,'<code>$1</code>');
  s=s.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>');
  s=s.replace(/(^|[\s(])\*([^*\n]+)\*(?=[\s.,;:!?)]|$)/g,'$1<em>$2</em>');
  s=s.replace(/(https?:\/\/[^\s<)"']+)/g,'<a href="$1">$1</a>');
  return s;
}
function md(src){
  const lines=esc(src).replace(/\r/g,'').split('\n');
  let out='',para=[],list=null,listBuf=[],inCode=false,codeBuf=[];
  const flushPara=()=>{if(para.length){out+='<p>'+inl(para.join('\n')).replace(/\n/g,'<br>')+'</p>';para=[];}};
  const flushList=()=>{if(list){out+='<'+list+'>'+listBuf.map(x=>'<li>'+inl(x)+'</li>').join('')+'</'+list+'>';list=null;listBuf=[];}};
  const flushAll=()=>{flushPara();flushList();};
 
  for(const raw of lines){
    const line=raw.replace(/\s+$/,'');
    if(/^\s*```/.test(line)){
      if(inCode){out+='<pre><code>'+codeBuf.join('\n')+'</code></pre>';codeBuf=[];inCode=false;}
      else{flushAll();inCode=true;}
      continue;
    }
    if(inCode){codeBuf.push(line);continue;}
    if(!line.trim()){flushAll();continue;}
 
    let m;
    if(m=line.match(/^\s*(#{1,3})\s+(.+)$/)){flushAll();out+='<h'+m[1].length+'>'+inl(m[2])+'</h'+m[1].length+'>';continue;}
    if(/^\s*([-*_]\s*){3,}$/.test(line)){flushAll();out+='<hr>';continue;}
    if(m=line.match(/^\s*[-•*]\s+(.+)$/)){flushPara();if(list!=='ul'){flushList();list='ul';}listBuf.push(m[1]);continue;}
    if(m=line.match(/^\s*\d+[.)]\s+(.+)$/)){flushPara();if(list!=='ol'){flushList();list='ol';}listBuf.push(m[1]);continue;}
    if(list){ // kontynuacja punktu listy
      listBuf[listBuf.length-1]+=' '+line.trim();continue;
    }
    para.push(line);
  }
  if(inCode&&codeBuf.length)out+='<pre><code>'+codeBuf.join('\n')+'</code></pre>';
  flushAll();
  return out;
}
 
function scrollBot(){const w=document.getElementById('msgs-wrap');w.scrollTop=w.scrollHeight;}
function esc(t){return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
function escAttr(t){return esc(t).replace(/"/g,'&quot;');}
 
/* ─── WYSYŁKA ─────────────────────────────────────────────────── */
async function send(){
  const text=ta.value.trim();
  if(pendingFiles.length&&!text){
    fsWarn.textContent='⚠ TYPE A DESCRIPTION OR QUESTION BEFORE SENDING!';
    fsWarn.style.color='#ff4444';ta.focus();return;
  }
  if(!text&&!pendingFiles.length)return;
  if(busy)return;
  busy=true;sbtn.disabled=true;
 
  const filesToSend=pendingFiles.map(f=>({...f}));
  const previews=filesToSend.filter(f=>f.type.startsWith('image/')).map(f=>f.dataUrl);
  addUser(text,previews);
  ta.value='';ta.style.height='64px';clearFiles();
 
  /* PAYLOAD dla n8n
     - message / chatInput      → tekst (bez zmian, kompatybilne ze starym WF)
     - file / fileType / fileName → PIERWSZY plik (kompatybilność ze starym WF)
     - file2..file5 (+Type/+Name) → kolejne pliki, gotowe do zmapowania w Vision node
     - files[]                   → pełna tablica, jeśli wolisz pętlę / Split Out       */
  const payload={message:text,chatInput:text,timestamp:Date.now(),fileCount:filesToSend.length};
  if(filesToSend.length){
    payload.file=filesToSend[0].base64;
    payload.fileType=filesToSend[0].type;
    payload.fileName=filesToSend[0].name;
    filesToSend.forEach((f,i)=>{
      if(i===0)return;
      payload['file'+(i+1)]=f.base64;
      payload['file'+(i+1)+'Type']=f.type;
      payload['file'+(i+1)+'Name']=f.name;
    });
    payload.files=filesToSend.map(f=>({file:f.base64,fileType:f.type,fileName:f.name}));
  }
 
  const iv=addThinking();
  try{
    const res=await fetch(N8N_URL,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
    if(!res.ok)throw new Error('n8n '+res.status);
    const data=await res.json();
    const reply=data.output||data.text||data.message||data.reply||data.response||(Array.isArray(data)&&(data[0].output||data[0].text||data[0].message))||'No response received.';
    removeThinking(iv);addAI(reply);
  }catch(err){
    removeThinking(iv);
    addAI('NEXUS is temporarily unavailable. Please check your connection and try again.');
    console.error('NEXUS error:',err);
  }
  busy=false;sbtn.disabled=false;
}
function qs(text){ta.value=text;send();}
function onKey(e){
  const mob=window.matchMedia('(max-width:700px)').matches;
  if(e.key==='Enter'&&!e.shiftKey&&!mob){e.preventDefault();send();}
}
function grow(el){el.style.height='64px';el.style.height=Math.min(el.scrollHeight,200)+'px';}
 
/* ─── GŁOS (włącz / wyłącz + ochrona kredytów) ───────────────── */
let vLive=false, vBusy=false, nexusConversation=null, _vCapTimer=null;
 
function setVoiceState(live){
  vLive=live;
  const btn=document.getElementById('vbtn');
  const lbl=document.getElementById('vbtnLabel');
  const slbl=document.getElementById('sheetVoiceLabel');
  const bar=document.getElementById('voice-bar');
  if(btn){btn.classList.toggle('vlive',live);btn.classList.remove('vwait');}
  if(lbl)lbl.textContent=live?'Stop voice':'Start voice';
  if(slbl)slbl.textContent=live?'Stop voice':'Start voice';
  if(bar)bar.classList.toggle('on',live);
  if(live){clearTimeout(_vCapTimer);_vCapTimer=setTimeout(()=>{stopVoice();},V_MAX_MS);}
  else{clearTimeout(_vCapTimer);}
}
 
async function getConversationClass(){
  if(window._ELConversation)return window._ELConversation;
  const urls=['https://esm.sh/@elevenlabs/client','https://cdn.jsdelivr.net/npm/@elevenlabs/client/+esm'];
  for(const url of urls){
    try{const mod=await import(url);const C=mod.Conversation||mod.default?.Conversation;if(C){window._ELConversation=C;return C;}}
    catch(e){console.warn('[NEXUS] CDN fallback:',url,e);}
  }
  return null;
}
 
async function toggleVoice(){
  if(vBusy)return;
  if(vLive||nexusConversation){await stopVoice();return;}
  vBusy=true;
  const btn=document.getElementById('vbtn');
  const lbl=document.getElementById('vbtnLabel');
  const Conversation=await getConversationClass();
  if(!Conversation){vBusy=false;alert('Voice SDK not available. Please refresh the page.');return;}
  try{await navigator.mediaDevices.getUserMedia({audio:true});}
  catch(e){vBusy=false;alert('Microphone access required. Please allow it in your browser and try again.');return;}
  if(btn)btn.classList.add('vwait');
  if(lbl)lbl.textContent='Connecting…';
  try{
    nexusConversation=await Conversation.startSession({
      agentId:ELEVENLABS_AGENT_ID,
      onConnect:()=>{setVoiceState(true);vBusy=false;},
      onDisconnect:()=>{nexusConversation=null;setVoiceState(false);vBusy=false;},
      onError:(err)=>{console.error('[NEXUS] Voice error:',err);nexusConversation=null;setVoiceState(false);vBusy=false;},
    });
  }catch(e){
    console.error('[NEXUS] startSession failed:',e);
    vBusy=false;setVoiceState(false);
    alert('Could not connect to NEXUS Voice.');
  }
}
 
async function stopVoice(){
  const conv=nexusConversation;
  nexusConversation=null;
  setVoiceState(false);
  if(conv){try{await conv.endSession();}catch(e){console.warn('endSession:',e);}}
}
 
// OCHRONA KREDYTÓW: kończymy sesję gdy użytkownik wychodzi / minimalizuje
window.addEventListener('pagehide',()=>{try{if(nexusConversation)nexusConversation.endSession();}catch(e){}});
window.addEventListener('beforeunload',()=>{try{if(nexusConversation)nexusConversation.endSession();}catch(e){}});
document.addEventListener('visibilitychange',()=>{if(document.hidden&&(vLive||nexusConversation))stopVoice();});
 
/* ─── MENU / FUNKCJE ─────────────────────────────────────────── */
function openSheet(){document.getElementById('sheet-bg').classList.add('on');document.getElementById('sheet').classList.add('on');}
function closeSheet(){document.getElementById('sheet-bg').classList.remove('on');document.getElementById('sheet').classList.remove('on');}
 
function clearChat(){msgs.innerHTML='';document.getElementById('quick').style.display='flex';clearFiles();addWelcome();}
function newSession(){if(!confirm('Start a new session?'))return;clearChat();}
function copyChat(){
  const t=[...document.querySelectorAll('#msgs .bubble, #msgs .ws')].map(b=>b.innerText.trim()).filter(Boolean).join('\n\n---\n\n');
  if(navigator.clipboard&&navigator.clipboard.writeText){
    navigator.clipboard.writeText(t).then(()=>toast('Conversation copied ✓')).catch(()=>fallbackCopy(t));
  }else fallbackCopy(t);
}
function fallbackCopy(t){
  const el=document.createElement('textarea');el.value=t;el.style.position='fixed';el.style.opacity='0';
  document.body.appendChild(el);el.select();
  try{document.execCommand('copy');toast('Conversation copied ✓');}catch(e){alert('Copy failed.');}
  document.body.removeChild(el);
}
async function pasteToInput(){
  try{
    const t=await navigator.clipboard.readText();
    if(t){ta.value=(ta.value?ta.value+'\n':'')+t;grow(ta);ta.focus();}
  }catch(e){alert('Your browser blocks automatic paste — long-press the input box and choose Paste.');}
}
function printChat(){window.print();}
 
let fsIdx=17;
function fontStep(d){
  fsIdx=Math.max(14,Math.min(24,fsIdx+d));
  document.documentElement.style.setProperty('--fs',fsIdx+'px');
}
 
function toast(txt){
  const el=document.createElement('div');
  el.textContent=txt;
  el.style.cssText='position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);z-index:9999;background:rgba(0,4,8,0.95);border:1px solid rgba(0,255,179,0.5);color:#00ffb3;font-family:Share Tech Mono,monospace;font-size:12px;letter-spacing:2px;padding:12px 20px;border-radius:24px;';
  document.body.appendChild(el);
  setTimeout(()=>el.remove(),2200);
}
 
/* wklejanie zdjęć bezpośrednio ze schowka (Ctrl+V) */
ta.addEventListener('paste',e=>{
  const items=e.clipboardData&&e.clipboardData.files;
  if(items&&items.length){intake(items);}
});
renderStrip();
</script>
</body>
</html>