:root{
  --bg: #0e0e11;
  --bg2:#0b0b0e;
  --fg: #e9e9ee;
  --muted:#9a9aaa;
  --line:#1a1a22;
  --card:#121218;
  --accent:#e9e9ee;
  --btn:#1a1a22;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--fg);
}

.app{
  height:100vh;
  display:flex;
  flex-direction:column;
  max-width:820px;
  margin:0 auto;
  padding:16px 14px 12px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px 14px;
  border-bottom:1px solid var(--line);
}

.persona{font-size:14px; color:var(--fg); letter-spacing:.3px}
.badge{
  margin-left:10px;
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:999px;
}

.chat{
  flex:1;
  overflow:auto;
  padding:18px 6px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msg{
  max-width:78%;
  padding:10px 12px;
  border-radius:16px;
  line-height:1.35;
  font-size:15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
}

.msg.user{
  align-self:flex-end;
  background:rgba(255,255,255,0.03);
}

.msg.ai{
  align-self:flex-start;
  background:rgba(255,255,255,0.015);
}

.meta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.composer{
  border-top:1px solid var(--line);
  padding:12px 6px 0;
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.input{
  width:100%;
  resize:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  color:var(--fg);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  min-height:42px;
  max-height:140px;
  line-height:1.35;
  font-size:15px;
}

.send{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  color:var(--fg);
}

button{cursor:pointer}
button:disabled{opacity:.45; cursor:not-allowed}

.ghost{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  padding:9px 12px;
  border-radius:12px;
}

.primary{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.08);
  color:var(--fg);
  padding:9px 12px;
  border-radius:12px;
}

.inlineOffer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:min(820px, calc(100% - 28px));
  border:1px solid var(--line);
  background:rgba(18,18,24,0.92);
  backdrop-filter: blur(8px);
  border-radius:18px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.inlineText{
  color:var(--fg);
  font-size:14px;
}

.inlineActions{
  display:flex;
  gap:10px;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.modalCard{
  width:min(520px, 100%);
  border:1px solid var(--line);
  background:rgba(18,18,24,0.95);
  border-radius:20px;
  padding:16px;
}

.modalTitle{margin:0 0 10px; font-size:16px; letter-spacing:.2px}
.modalText{margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.4}

.checkRow{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:12px;
  color:var(--fg);
  font-size:14px;
}

.modalActions{display:flex; justify-content:flex-end; gap:10px}

.hidden{display:none}

/* NOĆ — samo vizualno tamnije/tiše, bez “porno estetike” */
.app[data-mode="night"]{
  --bg:#07070a;
  --line:#14141c;
  --muted:#8b8b9c;
  background:transparent;
}

.app[data-mode="night"] .badge{
  color:#b9b9c9;
  border-color:#20202a;
}
/* --- SOFT presence layout (Leon/Iris lijevo) --- */
.samotiShell{
  min-height: 100vh;
  display: flex;
  align-items: stretch;

  /* sada shell drži širinu (umjesto .app) */
  max-width: 1100px;
  margin: 0 auto;
}

/* panel za vizual */
.presence{
  flex: 0 0 50%;
  max-width: 640px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-right: 1px solid var(--line);
}

@media (max-width: 1200px){
  .presence{ flex-basis: 40%; max-width: 560px; }
}

.presenceInner{
  position: absolute;
  inset: 0;
}

#presenceImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
  filter: brightness(0.94) contrast(0.96);

  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%
  );
}
#presenceImg[src*="iris"]{ object-position: 40% 30%; }
#presenceImg[src*="leon"]{ object-position: 48% 28%; }

/* chat područje desno */
.samotiShell .app{
  flex: 1 1 auto;
  min-width: 0;

  /* makni centriranje jer sad shell centrira */
  max-width: none;
  margin: 0;
}

/* Mobile: opcija A (vizual iznad, 20vh + fade dolje) */
@media (max-width: 820px){
  .samotiShell{
    flex-direction: column;
    max-width: 820px; /* zadrži originalni osjećaj na mobu */
  }

  .presence{
    flex: none;
    width: 100%;
    max-width: none;
    height: 20vh;
    min-height: 140px;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  #presenceImg{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    opacity: 0.88;
  }
}
/* =========================
   NOĆ 3D LAYER (canvas overlay)
   Soft ostaje identičan dok 3D nije ready
   ========================= */

.presenceInner{
  position: relative;
}

.presenceCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;         /* default: nikad ne smije smetati Softu */
  pointer-events: none;
}

/* Noć: canvas se prikazuje samo kad JS kaže da je spreman */
body.night .presenceCanvas.is-ready{
  display: block;
}

/* Kad 3D radi, fallback slika se samo sakrije (bez layout skoka) */
body.night .presenceInner.is-3d-ready #presenceImg{
  opacity: 0;
}

/* Night 2.5D: canvas must be the visible layer */
body.night .presenceInner > img#presenceImg { display: none !important; }

.presenceCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 2;
}

/* --- NIGHT presence videos (idle / typing) --- */
.presenceVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 1;
}

.presenceVideo.isVisible{
  opacity: 1;
}


/* TEMP: Night uses video presence (idle/typing), keep canvas hidden */
body.night .presenceCanvas{
  display: none !important;
}

/* Ensure presence has real height so canvas can render */
.presence { height: 100vh; }
.presenceInner { height: 100%; position: relative; }