/* genver-workspace demo styles */

.side-item {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.4rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.9rem; color: rgb(203 213 225); text-align: left;
  transition: background-color .12s, color .12s;
}
.side-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-item.active { background: rgb(124 58 237); color: #fff; }
.side-item .hash { color: rgb(148 163 184); font-weight: 600; }
.side-item.active .hash { color: rgba(255,255,255,.8); }
.side-badge { margin-left: auto; font-size: 10px; }

.badge-n, .badge-x {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 0px 6px; line-height: 16px;
}
.badge-n { background: rgb(224 242 254); color: rgb(2 132 199); }
.badge-x { background: rgb(237 233 254); color: rgb(109 40 217); }

.dot-online { width: 8px; height: 8px; border-radius: 999px; background: rgb(52 211 153); display: inline-block; }

/* message rows */
.msg-row { display: flex; gap: 0.7rem; padding: 0.35rem 0.5rem; border-radius: 0.6rem; }
.msg-row:hover { background: rgb(248 250 252); }
.dark .msg-row:hover { background: rgba(255,255,255,.03); }
.msg-avatar { width: 38px; height: 38px; border-radius: 0.5rem; flex: none; }

.md { font-size: 0.9rem; line-height: 1.6; color: rgb(30 41 59); word-break: break-word; }
.dark .md { color: rgb(203 213 225); }
.md p { margin: 0.15rem 0; }
.md ul, .md ol { margin: 0.3rem 0; padding-left: 1.2rem; }
.md li { margin: 0.1rem 0; }
.md code { background: rgb(241 245 249); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.dark .md code { background: rgb(30 41 59); }
.md pre { background: rgb(15 23 42); color: rgb(226 232 240); padding: 0.7rem 0.9rem; border-radius: 0.6rem; overflow-x: auto; margin: 0.4rem 0; }
.dark .md pre { background: #000; }
.md pre code { background: transparent; padding: 0; }
.md table { border-collapse: collapse; margin: 0.4rem 0; font-size: 0.85rem; }
.md th, .md td { border: 1px solid rgb(226 232 240); padding: 4px 10px; }
.dark .md th, .dark .md td { border-color: rgb(51 65 85); }
.md th { background: rgb(248 250 252); }
.dark .md th { background: rgb(30 41 59); }
.md a { color: rgb(124 58 237); text-decoration: underline; }
.md strong { font-weight: 700; }
.mention { color: rgb(109 40 217); background: rgb(237 233 254); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.dark .mention { color: rgb(196 181 253); background: rgba(124,58,237,.2); }

/* typing */
.typing span { display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:999px; background: rgb(148 163 184); animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

.mention-opt { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; cursor:pointer; }
.mention-opt:hover, .mention-opt.active { background: rgb(243 244 246); }
.dark .mention-opt:hover, .dark .mention-opt.active { background: rgb(30 41 59); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85); background-clip: content-box; }