/* ===== SpaceNotes — Telegram layout x space theme ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#04020f; --panel:rgba(13,10,36,.62); --panel2:rgba(9,7,26,.5);
  --line:rgba(133,116,255,.18); --hover:rgba(143,123,255,.10);
  --txt:#eae7ff; --dim:#8d87b8; --dim2:#625c8f;
  --acc:#8f7bff; --acc2:#4de3ff; --ok:#38e8a4; --err:#ff5f7e;
  --bubble-me:linear-gradient(135deg,#6a4dff,#8f7bff); --bubble-you:rgba(28,22,64,.75);
  --neb1:#3b1d7a; --neb2:#0b3b5c; --neb3:#5c0b4e;
}
[data-theme="aurora"]{ --bg:#020d0d; --neb1:#0b5c4a; --neb2:#0b3b5c; --neb3:#123d6a; --acc:#38e8a4; --acc2:#4de3ff; --bubble-me:linear-gradient(135deg,#0e8f68,#38e8a4); }
[data-theme="mars"]{ --bg:#12040a; --neb1:#7a1d3b; --neb2:#7a3b1d; --neb3:#4d0b2e; --acc:#ff7a9e; --acc2:#ffb36b; --bubble-me:linear-gradient(135deg,#c9405f,#ff7a9e); }
[data-theme="void"]{ --bg:#000005; --neb1:#111138; --neb2:#131329; --neb3:#0d0d22; --acc:#5a5aff; --acc2:#7a7aff; --txt:#dcdcff; }
[data-theme="moon"]{ --bg:#0a0e1f; --neb1:#28325c; --neb2:#3b3b6e; --neb3:#1d2a4d; --acc:#9db4ff; --acc2:#c4d6ff; --bubble-me:linear-gradient(135deg,#5a76d8,#9db4ff); }

html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--bg); color:var(--txt); overflow:hidden;
}
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.nebula{ position:fixed; border-radius:50%; filter:blur(90px); opacity:.32; z-index:0; pointer-events:none; }
.n1{ width:430px; height:430px; background:var(--neb1); top:-130px; left:-110px; }
.n2{ width:390px; height:390px; background:var(--neb2); bottom:-150px; right:-90px; opacity:.24; }
.n3{ width:300px; height:300px; background:var(--neb3); top:40%; left:45%; opacity:.2; }

/* ===== App layout (3 panels kiểu Telegram) ===== */
.app{ position:relative; z-index:1; display:grid; height:100vh; height:100dvh;
  grid-template-columns:320px 300px 1fr; }
.panel{ background:var(--panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; }
.pane-head{ display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line); min-height:64px; flex:none; }
.pane-foot{ padding:12px; border-top:1px solid var(--line); flex:none; }
.side-foot{ padding:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; flex:none; }
.back{ display:none; background:none; border:none; color:var(--dim); font-size:26px; cursor:pointer;
  padding:0 6px; line-height:1; flex:none; }

/* ===== Sidebar ===== */
.side-head{ display:flex; flex-direction:column; gap:12px; padding:14px; border-bottom:1px solid var(--line); flex:none; }
.brand{ display:flex; align-items:center; gap:11px; }
.orbit{ width:42px; height:42px; position:relative; flex:none; }
.orbit .planet{ position:absolute; width:16px; height:16px; border-radius:50%; top:13px; left:13px;
  background:radial-gradient(circle at 35% 30%, #b7a8ff, var(--acc)); box-shadow:0 0 16px var(--acc); }
.orbit .ring{ position:absolute; inset:0; border:2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius:50%; animation:spin 5s linear infinite; }
.orbit .ring::after{ content:''; position:absolute; width:6px; height:6px; background:var(--acc2);
  border-radius:50%; top:-3px; left:50%; box-shadow:0 0 9px var(--acc2); }
@keyframes spin{ to{ transform:rotate(360deg); } }
h1{ font-size:17px; letter-spacing:1.5px; font-weight:800;
  background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--acc) 60%,#fff) 30%,var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
#stat-line{ font-size:11px; color:var(--dim); }
.search-wrap{ position:relative; }
.s-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--dim2); pointer-events:none; }
#search{ width:100%; padding:11px 12px 11px 34px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.28); color:var(--txt); font-size:13.5px; outline:none; transition:.2s; }
#search:focus{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%, transparent); }

.groups{ flex:1; overflow-y:auto; padding:8px; }
.g-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px; cursor:pointer;
  transition:.18s; border:1px solid transparent; position:relative; }
.g-item:hover{ background:var(--hover); }
.g-item.on{ background:var(--hover); border-color:var(--line); }
.g-item.on::before{ content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:3px; background:linear-gradient(180deg,var(--acc),var(--acc2)); box-shadow:0 0 8px var(--acc); }
.g-emoji{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:rgba(0,0,0,.3); border:1px solid var(--line); flex:none; }
.g-meta{ min-width:0; flex:1; }
.g-nm{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-pv{ font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.g-cnt{ font-size:11px; color:var(--acc2); background:color-mix(in srgb,var(--acc) 20%, transparent);
  padding:2px 8px; border-radius:9px; flex:none; }

/* ===== Topics panel ===== */
.g-head,.t-head{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.g-info,.t-info{ flex:1; min-width:0; }
.g-name,.t-name{ font-weight:800; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-sub,.t-sub{ font-size:12px; color:var(--dim); margin-top:2px; }
.icon-btn{ background:none; border:none; color:var(--dim); cursor:pointer; padding:7px; border-radius:10px;
  display:flex; transition:.2s; flex:none; }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:var(--hover); color:var(--txt); }
.topics{ flex:1; overflow-y:auto; padding:8px; }
.t-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px; cursor:pointer;
  transition:.18s; border:1px solid transparent; position:relative; }
.t-item:hover{ background:var(--hover); }
.t-item.on{ background:var(--hover); border-color:var(--line); }
.t-item.on::before{ content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:3px; background:linear-gradient(180deg,var(--acc2),var(--acc)); box-shadow:0 0 8px var(--acc2); }
.t-emoji{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:rgba(0,0,0,.3); border:1px solid var(--line); flex:none; }
.t-item.pinned .t-emoji{ box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 45%, transparent); }

/* ===== Premium emoji badge (tích xanh) ===== */
.prem{ position:relative; display:inline-flex; }
.prem::after{ content:'✓'; position:absolute; right:-6px; bottom:-4px; width:15px; height:15px;
  background:#3796ff; color:#fff; font-size:10px; font-weight:900; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);
  box-shadow:0 0 8px rgba(55,150,255,.8); }
.prem .pe{ display:inline-block; animation:pefloat 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 70%, transparent)); }
@keyframes pefloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.06); } }

/* ===== Chat ===== */
.pin-bar{ display:flex; align-items:center; gap:9px; padding:8px 14px; background:color-mix(in srgb,var(--acc) 12%, transparent);
  border-bottom:1px solid var(--line); font-size:13px; flex:none; cursor:pointer; }
.pin-bar svg{ width:14px; height:14px; color:var(--acc); flex:none; }
.pin-txt{ flex:1; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-x{ background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; padding:4px 6px; }
.msgs{ flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; }
.day-sep{ text-align:center; font-size:11px; color:var(--dim); margin:4px 0;
  display:flex; align-items:center; gap:10px; }
.day-sep::before,.day-sep::after{ content:''; flex:1; height:1px; background:var(--line); }
.msg{ max-width:76%; display:flex; flex-direction:column; position:relative; animation:msgin .22s ease; }
@keyframes msgin{ from{ opacity:0; transform:translateY(8px); } }
.msg.me{ align-self:flex-end; align-items:flex-end; }
.msg .bub{ padding:9px 13px 7px; border-radius:16px; font-size:14.5px; line-height:1.5; word-break:break-word;
  background:var(--bubble-you); border:1px solid var(--line); border-bottom-left-radius:6px; }
.msg.me .bub{ background:var(--bubble-me); border:none; border-bottom-left-radius:16px; border-bottom-right-radius:6px;
  box-shadow:0 4px 18px color-mix(in srgb,var(--acc) 35%, transparent); }
.msg .bub.editing{ outline:1px dashed var(--acc2); }
.msg .meta{ display:flex; align-items:center; gap:6px; padding:3px 6px 0; font-size:10.5px; color:var(--dim2); }
.msg.pinned .pin-badge{ color:var(--acc); }
.msg.pinned .meta .pin-badge::before{ content:'📌'; font-size:9px; }
.msg:hover .acts{ opacity:1; }
.acts{ display:flex; gap:2px; padding:2px; border-radius:12px; background:var(--panel2);
  border:1px solid var(--line); opacity:0; transition:.15s; margin:2px 2px 0; }
.acts button{ background:none; border:none; cursor:pointer; padding:4px 6px; font-size:13.5px; border-radius:8px; }
.acts button:hover{ background:var(--hover); }
.reacts{ display:flex; gap:4px; flex-wrap:wrap; margin:2px 4px 0; }
.react{ font-size:12.5px; padding:2px 8px; border-radius:11px; background:rgba(0,0,0,.3);
  border:1px solid var(--line); cursor:pointer; transition:.15s; }
.react.on{ border-color:var(--acc); background:color-mix(in srgb,var(--acc) 18%, transparent); }
.react:hover{ transform:scale(1.08); }

.reactions-bar{ display:flex; gap:4px; padding:6px 12px; border-top:1px solid var(--line);
  overflow-x:auto; flex:none; scrollbar-width:none; }
.reactions-bar::-webkit-scrollbar{ display:none; }
.pr,.acts button{ flex:none; }
.pr{ background:rgba(0,0,0,.25); border:1px solid transparent; border-radius:10px; font-size:16px;
  padding:4px 8px; cursor:pointer; transition:.15s; }
.pr:hover{ background:var(--hover); border-color:var(--line); transform:translateY(-2px) scale(1.12); }
#btn-emoji-picker{ background:linear-gradient(90deg,var(--acc),var(--acc2)); border:none; border-radius:10px;
  font-size:15px; padding:4px 9px; cursor:pointer; }

.chat-input{ display:flex; align-items:flex-end; gap:10px; padding:12px; border-top:1px solid var(--line); flex:none; }
#msg-input{ flex:1; resize:none; max-height:120px; border-radius:16px; border:1px solid var(--line);
  background:rgba(0,0,0,.3); color:var(--txt); font-size:14.5px; padding:12px 15px; outline:none;
  font-family:inherit; line-height:1.4; transition:.2s; }
#msg-input:focus{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%, transparent); }
.send{ width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px color-mix(in srgb,var(--acc) 45%, transparent); transition:.2s; }
.send svg{ width:20px; height:20px; color:#fff; }
.send:hover{ transform:scale(1.06); }
.send:active{ transform:scale(.94); }

/* ===== Buttons, modals ===== */
.btn-new{ width:100%; padding:13px; border:1px dashed color-mix(in srgb,var(--acc) 45%, transparent);
  background:color-mix(in srgb,var(--acc) 8%, transparent); color:var(--txt); font-weight:700; font-size:14px;
  border-radius:14px; cursor:pointer; transition:.2s; letter-spacing:.3px; }
.btn-new:hover{ background:color-mix(in srgb,var(--acc) 16%, transparent); border-style:solid; }
.theme-dots{ display:flex; gap:9px; justify-content:center; }
.dot{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.2s; }
.dot.on{ border-color:#fff; transform:scale(1.15); }
.t-nebula{ background:linear-gradient(135deg,#6a4dff,#4de3ff); }
.t-aurora{ background:linear-gradient(135deg,#0e8f68,#4de3ff); }
.t-mars{ background:linear-gradient(135deg,#c9405f,#ffb36b); }
.t-void{ background:linear-gradient(135deg,#111,#5a5aff); }
.t-moon{ background:linear-gradient(135deg,#5a76d8,#c4d6ff); }

.modal{ position:fixed; inset:0; background:rgba(2,0,12,.6); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal.show{ display:flex; }
.modal-card{ width:100%; max-width:400px; background:linear-gradient(160deg,rgba(30,24,72,.92),rgba(10,8,30,.94));
  border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:pop .22s ease; }
@keyframes pop{ from{ opacity:0; transform:scale(.92); } }
.modal-card h3{ font-size:17px; margin-bottom:16px; letter-spacing:.4px; }
.modal-card label{ display:block; font-size:12px; color:var(--dim); margin:12px 0 6px; }
.modal-card input[type=text]{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.32); color:var(--txt); font-size:14.5px; outline:none; }
.modal-card input[type=text]:focus{ border-color:var(--acc); }
.emoji-row{ display:flex; gap:8px; flex-wrap:wrap; max-height:130px; overflow-y:auto; padding:4px 0; }
.emoji-row button{ font-size:21px; background:rgba(0,0,0,.25); border:1px solid transparent; border-radius:12px;
  width:42px; height:42px; cursor:pointer; transition:.15s; position:relative; }
.emoji-row button:hover{ transform:scale(1.15); border-color:var(--acc); background:var(--hover); }
.emoji-row button.on{ border-color:var(--acc); box-shadow:0 0 12px color-mix(in srgb,var(--acc) 50%, transparent); }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.mbtn{ flex:1; padding:12px; border-radius:12px; border:none; cursor:pointer; font-weight:700; font-size:14px; transition:.2s; }
.mbtn.primary{ background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff;
  box-shadow:0 4px 18px color-mix(in srgb,var(--acc) 40%, transparent); }
.mbtn.ghost{ background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--line); }
.mbtn:active{ transform:scale(.97); }

.emoji-picker{ position:fixed; bottom:70px; right:16px; width:280px; max-height:260px; overflow-y:auto;
  background:linear-gradient(160deg,rgba(30,24,72,.95),rgba(10,8,30,.97)); border:1px solid var(--line);
  border-radius:18px; padding:10px; display:none; z-index:60; box-shadow:0 18px 60px rgba(0,0,0,.55);
  display:none; flex-wrap:wrap; gap:4px; }
.emoji-picker.show{ display:flex; }
.emoji-picker button{ font-size:20px; background:none; border:none; border-radius:9px; width:38px; height:38px;
  cursor:pointer; transition:.12s; }
.emoji-picker button:hover{ background:var(--hover); transform:scale(1.2); }

.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:14px; z-index:80; opacity:0; transition:.25s; pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.4); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.empty{ text-align:center; color:var(--dim); padding:40px 20px; font-size:13.5px; line-height:1.8; }
.empty .big{ font-size:40px; filter:drop-shadow(0 0 14px color-mix(in srgb,var(--acc) 60%, transparent)); }

/* ===== Scrollbars ===== */
.groups::-webkit-scrollbar,.topics::-webkit-scrollbar,.msgs::-webkit-scrollbar,.emoji-picker::-webkit-scrollbar{ width:6px; }
.groups::-webkit-scrollbar-thumb,.topics::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb,.emoji-picker::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--acc) 35%, transparent); border-radius:6px; }
.empty{ margin:auto; }

/* ===== Mobile: stack panels ===== */
@media (max-width: 900px){
  .app{ grid-template-columns:1fr; }
  .panel{ display:none; }
  .panel.active{ display:flex; }
  .back{ display:block; }
  #sidebar.active{ display:flex; }
}
@media (min-width: 901px){
  .panel{ display:flex !important; }
  #sidebar{ display:flex !important; }
}