/* 3lli.ee — heledam, modernne teema */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e5e7eb;
  --accent: #2563eb;
  --accent-2: #06b6d4;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(2,6,23,.08);

  /* ƎLLi (paneeli) eraldiseisvad värvid – ei sega lehe teemat */
  --elli-bg:#0d0f1a;
  --elli-surface:#12142a;
  --elli-accent:#7dd3fc;
  --elli-accent-2:#60a5fa;
  --elli-text:#ecf3ff;
  --elli-muted:#9aa4bf;
}

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

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- Header & Nav (keskel) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
}
.head-inner{display:grid; place-items:center; height:64px}
.nav{display:flex; align-items:center; gap:16px}
.brand{
  display:inline-grid; place-items:center;
  font-weight:800; letter-spacing:.6px;
  color: var(--text); text-decoration:none;
  padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.12));
}
.nav .nav-links{
  display:flex; align-items:center; gap:18px;
  margin-left: 18px;
}
.nav a{color:var(--text); text-decoration:none; font-weight:600; opacity:.86}
.nav a:hover{opacity:1; color: var(--accent)}

.dropdown{position:relative}
.dropbtn{
  appearance:none; background:transparent; border:none; cursor:pointer;
  font: 600 16px/1 Inter,system-ui; color:var(--text); opacity:.86; padding:8px 4px;
}
.dropbtn:hover{opacity:1; color:var(--accent)}

/* Rippmenüü – kohe nupu all, väikese vahega */
.menu{
  display:none;
  position:absolute;
  top:100%;              /* nupu alumine serv */
  left:0;
  margin-top:6px;       /* teadlik vahe nupu ja menüü vahel */
  min-width:220px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: var(--shadow);
  padding:8px 0;
  z-index:60;

  /* pehmem avamine */
  opacity:0; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}

/* NÄHTAMATU HOVER-SILD: katab vahe nupu ja menüü vahel
   + natuke laiust vasakule/paremale diagonaal-liikumise jaoks */
.dropdown::after{
  content:"";
  position:absolute;
  top:100%;              /* algab täpselt nupu alt */
  left:-8px;             /* laiendame koridori külgedele */
  right:-8px;
  height:8px;           /* >= margin-top (8px) */
  background:transparent;
}

/* avamine hiirega ja klaviatuuri fookusega */
.dropdown:hover .menu,
.dropdown:focus-within .menu{
  display:block;
  opacity:1; transform: translateY(0);
}

.menu a{
  display:block;
  padding:10px 14px;
  color:var(--text);
  text-decoration:none;
  font-weight:500;
}
.menu a:hover{background:#f1f5f9}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  width:100%;
  min-height: 46vh;
  display:grid; place-items:center;
  overflow: clip;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 480px at 110% 0%, rgba(6,182,212,.18), transparent 60%),
    linear-gradient(180deg, #eef2ff, #f8fafc 60%);
}
.hero.has-image{
  background:
    linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.35)),
    var(--hero-fallback, #000);
  background-size: cover;
  background-position: center;
}
.hero-center{position:relative; z-index:1; display:grid; place-items:center}
.elli-logo{
  font-weight:800; font-size: clamp(48px, 10vw, 140px);
  color: #fff;
  text-shadow: 0 8px 40px rgba(0,0,0,.35);
  letter-spacing:.5px;
}

/* ---------- Main ---------- */
.main{padding: 40px 0 24px}
.placeholder{min-height: 220px; border-radius: var(--radius)}

/* ---------- Footer (heledam/hallikam tekst ~70%) ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background: var(--surface);
  margin-top: 24px;
}
.site-footer .wrap{
  text-align:center; padding: 24px 16px; max-width:900px;
}
.site-footer p{
  margin: 8px 0;
  color: rgba(15,23,42,.7);
}

/* ---------- ƎLLi assistent (FAB + paneel) ---------- */
#elli-fab{
  position:fixed;right:16px;bottom:16px;z-index:2147483641;
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
  background:linear-gradient(145deg,var(--elli-accent),var(--elli-accent-2));
  color:#062436;font-weight:800;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 10px 35px rgba(0,0,0,.35);border:0;transform:translateZ(0)
}
#elli-fab:hover{filter:brightness(1.05)}
#elli-fab svg{width:22px;height:22px}

#elli-panel{
  position:fixed;right:16px;bottom:84px;width:360px;max-width:calc(100vw - 24px);
  height:560px;max-height:70vh;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--elli-bg),#0a1326 40%, #0b152c 100%);
  box-shadow:0 10px 35px rgba(0,0,0,.35);border:1px solid #0f1b33;color:var(--elli-text);
  z-index:2147483640;display:none
}
@media (min-width:800px){#elli-panel{height:640px;max-height:80vh}}

.elli-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #1a2744;background:linear-gradient(180deg,#0d1a2f,#0c1527)}
.elli-dot{width:10px;height:10px;border-radius:50%;background:var(--elli-accent);box-shadow:0 0 12px var(--elli-accent)}
.elli-title{font-weight:800;letter-spacing:.2px}
.elli-sub{font-size:12px;color:var(--elli-muted)}

.elli-body{display:flex;flex-direction:column;height:100%}
.elli-feed{flex:1;overflow:auto;padding:14px 12px;scroll-behavior:smooth}
.elli-msg{max-width:85%;margin:8px 0;padding:10px 12px;border-radius:14px;line-height:1.35;font-size:14px;border:1px solid #1b2744;background:#0f1a31}
.elli-msg.user{margin-left:auto;background:#101d39;border-color:#213055}
.elli-msg .tag{display:inline-block;margin:2px 6px 0 0;padding:6px 9px;border-radius:999px;font-size:12px;border:1px solid #25365f;cursor:pointer}
.elli-msg .tag:hover{background:#132247}

.elli-input{display:flex;gap:8px;padding:10px;border-top:1px solid #1a2744;background:#0c1527}
.elli-input input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid #223155;background:#0c1b36;color:var(--elli-text);outline:none}
.elli-input button{padding:10px 14px;border-radius:12px;border:1px solid #223155;background:linear-gradient(145deg,var(--elli-accent),var(--elli-accent-2));color:#062436;font-weight:700;cursor:pointer}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.card{padding:10px;border-radius:12px;border:1px solid #223155;background:#0c1b36;cursor:pointer}
.card:hover{filter:brightness(1.06)}

.bar{height:8px;border-radius:999px;background:#11234a;position:relative;overflow:hidden;margin:4px 0}
.bar>i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--elli-accent),var(--elli-accent-2))}

.small{font-size:12px;color:var(--elli-muted)}
a.ghost{color:var(--elli-accent-2);text-decoration:none;border-bottom:1px dotted #2a8}

#elli-panel ::-webkit-scrollbar{height:10px;width:10px}
#elli-panel ::-webkit-scrollbar-thumb{background:#1d2b4a;border-radius:10px}

#elli-toast{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  padding:10px 14px;border-radius:999px;background:#0e1a2f;color:var(--elli-text);
  border:1px solid #213055;display:none;z-index:2147483642
}

/* ---------- Small helpers ---------- */
@media (max-width: 860px){
  .nav .nav-links{gap:12px}
  .dropbtn{font-size:15px}
}