:root{
  --bg-start:#0b1021;
  --bg-end:#2a0c38;
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.06);
  --text: #e9f2ff;
  --muted:#a9b8d6;
  --brand1:#7cc7ff;
  --brand2:#ff6e61;
  --accent:#8f7bff;
  --ok:#56e39f;
  --danger:#ff7d66;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #16204a 0%, rgba(22, 32, 74, 0) 60%),
              radial-gradient(900px 700px at 90% 30%, #361655 0%, rgba(54,22,85,0) 65%),
              linear-gradient(160deg,var(--bg-start),var(--bg-end));
  overflow-x:hidden;
}
.container{max-width:1100px; margin:0 auto; padding:0 20px;}
header{position:sticky; top:0; z-index:20; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,12,25,.8), rgba(10,12,25,.35));
  border-bottom:1px solid rgba(255,255,255,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand svg{width:34px; height:34px;}
.brand-name{font-weight:700; letter-spacing:.2px; font-size:20px}
.nav-actions{display:flex; align-items:center; gap:10px}
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer; font-weight:600;
  padding:12px 16px; border-radius:14px; transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border;
  background:var(--glass); color:var(--text); box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background: linear-gradient(135deg, var(--brand2), var(--brand1)); color:#0a0d1e;}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.15)}
footer{margin:40px 0; text-align:center; color:var(--muted)}
@media (max-width:640px){ .brand-name{font-size:18px} }

/* orbs reused */
.orb{position:fixed; pointer-events:none; filter: blur(45px); opacity:.25; z-index:0}
.orb.o1{width:420px;height:420px; background: #6db7ff; left:-80px; top:-80px; animation: float 12s ease-in-out infinite;}
.orb.o2{width:520px;height:520px; background: #8f7bff; right:-120px; top:120px; animation: float 16s ease-in-out infinite reverse;}
.orb.o3{width:420px;height:420px; background: #ff6e61; left:40%; bottom:-160px; animation: float 18s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)}}

.page{position:relative; z-index:1; padding:28px 0 20px;}
.h1{font-size:36px; margin:8px 0 4px; line-height:1.15}
.lead{color:var(--muted); margin:0 0 12px}
.status{display:flex; gap:16px; color:var(--muted); font-size:14px;}

.bubbles{
  display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin:20px 0 12px;
}
.bubble-card{
  background:var(--glass); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:16px; box-shadow:var(--shadow);
  display:flex; gap:12px; cursor:pointer; transition:.2s transform,.2s border-color,.2s background;
  min-height:120px;
}
.bubble-card:hover{ transform: translateY(-2px); border-color: rgba(124,199,255,.45); }
.bubble-card.active{ outline:2px solid var(--brand1); background: rgba(124,199,255,.08); }
.bubble-card .avatar{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,199,255,.28), rgba(255,110,97,.28));
  flex-shrink:0; font-size:22px;
}
.bubble-card .text{flex:1}
.bubble-card .intro{margin-bottom:4px}
.bubble-card .meta{color:var(--muted); font-size:13px; margin-top:6px}

.actions{display:flex; gap:12px; margin-top:6px}
.actions .btn[disabled]{opacity:.45; cursor:not-allowed}

.modal{
  position:fixed; 
  inset:0; 
  display:none; 
  place-items:center; 
  padding:20px; 
  z-index:50; 
  background:rgba(5,8,20,.6); 
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.open{
  display:grid;
  opacity: 1;
}
.chat-card{
  width:min(720px,100%); 
  background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); 
  border-radius:18px; 
  box-shadow:var(--shadow); 
  overflow:hidden; 
  position:relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.modal.open .chat-card{
  transform: translateY(0);
}
.close-x{
  position:absolute; 
  top:12px; 
  right:12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color:#fff; 
  font-size:18px; 
  cursor:pointer;
  border-radius:50%; 
  width:36px; 
  height:36px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  z-index: 100;
  pointer-events: auto;
  transition: all 0.2s ease;
  font-weight: bold;
}
.close-x:hover{ 
  background: rgba(255,255,255,0.25); 
  transform: scale(1.1);
}
.chat-head{
  display:flex; 
  gap:12px; 
  padding:16px; 
  border-bottom:1px solid rgba(255,255,255,.1); 
  align-items:center;
  position: relative;
}
.chat-head .avatar{
  width:38px; 
  height:38px; 
  border-radius:10px; 
  display:grid; 
  place-items:center; 
  background:rgba(255,255,255,.08)
}
.nick{font-weight:700}
.topic{color:var(--muted); font-size:13px}
.chat-body{
  height:340px; 
  overflow:auto; 
  padding:16px; 
  display:flex; 
  flex-direction:column; 
  gap:10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.chat-body::-webkit-scrollbar {
  width: 6px;
}
.chat-body::-webkit-scrollbar-track {
  background: transparent;
}
.chat-body::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.3);
  border-radius: 3px;
}
.msg{
  max-width:72%; 
  padding:10px 12px; 
  border-radius:14px; 
  font-size:14px; 
  line-height:1.35;
  word-break: break-word;
}
.msg.you{
  align-self:flex-end; 
  background: linear-gradient(135deg, var(--brand2), var(--brand1)); 
  color:#0a0d1e;
}
.msg.them{
  align-self:flex-start; 
  background: rgba(255,255,255,.08); 
  border:1px solid rgba(255,255,255,.12);
}
.chat-input{
  display:flex; 
  gap:8px; 
  padding:12px; 
  border-top:1px solid rgba(255,255,255,.1); 
  background:rgba(0,0,0,.15)
}
.chat-input input{
  flex:1; 
  padding:12px 14px; 
  border-radius:12px; 
  border:1px solid rgba(255,255,255,.14); 
  background:rgba(9,12,24,.6); 
  color:var(--text); 
  outline:none;
  font-family: inherit;
}
.chat-input input:focus{
  border-color:var(--brand1);
}

@media (max-width:980px){
  .bubbles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .h1{font-size:28px}
  .bubbles{grid-template-columns:1fr}
  .modal {
    padding: 10px;
  }
  .chat-card {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* === Richer chat demo additions === */
.badge{
  background: linear-gradient(135deg,var(--brand1),var(--brand2));
  color:#0a0d1e; padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px;
  box-shadow: var(--shadow);
}
.bubble-card .badges{margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bubble-card .unread{
  background:#ffefef; color:#5a1a1a; border-radius:10px; padding:2px 6px; font-size:11px; font-weight:700;
}
.msg time{
  display:block; 
  opacity:.6; 
  font-size:11px; 
  margin-top:4px;
  font-style: italic;
}
.typing{
  align-self:flex-start; 
  display:flex; 
  gap:6px; 
  padding:10px 12px; 
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); 
  border-radius:14px;
}
.dot{
  width:6px; 
  height:6px; 
  border-radius:50%; 
  background:#fff; 
  opacity:.6; 
  animation: bounce 1s infinite ease-in-out
}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(0.8); opacity:.4}40%{transform:scale(1); opacity:.9}}
.quick{
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  padding:10px 12px; 
  border-top:1px solid rgba(255,255,255,.06); 
  background:rgba(0,0,0,.12)
}
.quick button{
  padding:8px 12px; 
  border-radius:999px; 
  border:1px solid rgba(255,255,255,.14); 
  background:rgba(255,255,255,.06); 
  color:var(--text); 
  cursor:pointer;
  font-size: 12px;
}
.quick button:hover{
  background:rgba(255,255,255,.12)
}
.chat-head .back{margin-right:auto}
.chat-head .back.btn-ghost{padding:8px 10px; border-radius:10px}

/* === Megtartott beszélgetések oldalsáv === */
#keptPanel{
  position: fixed; 
  right: 20px; 
  top: 92px; 
  z-index: 30;
  width: 280px; 
  max-height: calc(100vh - 120px); 
  overflow:auto;
  background: var(--glass); 
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px; 
  box-shadow: var(--shadow); 
  padding: 12px;
}
#keptPanel .kept-head{
  font-weight: 700; 
  margin-bottom: 8px; 
  font-size: 14px; 
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.1); 
  padding-bottom: 8px;
}
.kept-list{
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex; 
  flex-direction:column; 
  gap:8px
}
.kept-item{
  display:flex; 
  gap:10px; 
  align-items:flex-start; 
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12); 
  border-radius:12px; 
  padding:10px;
  background: rgba(255,255,255,.05);
  transition: all 0.2s ease;
}
.kept-item:hover{ 
  border-color: rgba(124,199,255,.45); 
  background: rgba(124,199,255,.08); 
}
.kept-item .avatar{ 
  width:32px; 
  height:32px; 
  border-radius:10px; 
  display:grid; 
  place-items:center; 
  background:rgba(255,255,255,.08) 
}
.kept-item .meta{ 
  color: var(--muted); 
  font-size:12px; 
  margin-top:2px 
}
/* törlés gomb stílus */
.kept-item .del{
  margin-left:auto; 
  background:rgba(255,255,255,.08); 
  border:1px solid rgba(255,255,255,.15);
  width:24px; 
  height:24px; 
  border-radius:8px; 
  color:#fff; 
  cursor:pointer; 
  line-height:0; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size: 16px;
  font-weight: bold;
}
.kept-item .del:hover{ 
  background:rgba(255,255,255,.15) 
}

/* jelöld a választott kártyát */
.bubble-card.kept { 
  outline: 2px solid var(--ok); 
  background: rgba(86, 227, 159, .12); 
}
.bubble-card.disabled { 
  opacity:.45; 
  pointer-events:none; 
}

/* reszponzív: mobilon a sáv alulra */
@media (max-width: 980px){
  #keptPanel{
    position: static; 
    width: 100%; 
    max-height: none; 
    margin-top: 12px;
  }
}