/* veda-session styling — the live demo window */

.vsession { width: 100%; }

.vsession__chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 22px; border-bottom: 1px solid var(--noir-line-2);
  background: rgba(255,255,255,0.015);
}

.vsession__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 460px;
}

/* LEFT stage */
.vsession__stage {
  display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--noir-line-2);
  min-width: 0;
}
.vsession__avatar {
  position: relative; height: 210px; overflow: hidden;
  border-bottom: 1px solid var(--noir-line-2);
  background: radial-gradient(120% 120% at 50% 30%, #1a1a1e 0%, #0b0b0c 70%);
}
.vsession__slot { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; --slot-bg: transparent; opacity: 0.95; }
.vsession__speaking {
  position: absolute; left: 18px; bottom: 14px; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 99px; background: rgba(8,8,9,0.6);
  backdrop-filter: blur(8px); border: 1px solid var(--noir-line-2);
}
.bars { display: flex; align-items: center; gap: 3px; height: 14px; }
.bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--on-noir-2); transition: background .4s; }
.bars--on i { background: var(--bronze); animation: eq 0.9s ease-in-out infinite; }
.bars--on i:nth-child(2){ animation-delay: .15s; } .bars--on i:nth-child(3){ animation-delay: .3s; }
.bars--on i:nth-child(4){ animation-delay: .12s; } .bars--on i:nth-child(5){ animation-delay: .26s; }
@keyframes eq { 0%,100%{ height: 4px; } 50%{ height: 14px; } }

.vsession__transcript {
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; max-height: 290px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.vsession__transcript::-webkit-scrollbar { width: 5px; }
.vsession__transcript::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }

.bubble { display: flex; flex-direction: column; gap: 5px; max-width: 92%; }
.bubble--veda { align-self: flex-start; }
.bubble--rep { align-self: flex-end; align-items: flex-end; }
.bubble__who { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--on-noir-2); }
.bubble__text {
  font-size: 14.5px; line-height: 1.5; padding: 11px 14px; border-radius: 14px;
}
.bubble--veda .bubble__text {
  background: rgba(201,163,107,0.12); border: 1px solid rgba(201,163,107,0.22); color: #F0E6D4; border-bottom-left-radius: 4px;
}
.bubble--rep .bubble__text {
  background: rgba(255,255,255,0.05); border: 1px solid var(--noir-line); color: var(--on-noir); border-bottom-right-radius: 4px;
}
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }

/* RIGHT panel */
.vsession__panel { padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vsession__divider { height: 1px; background: var(--noir-line-2); }

.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--noir-line); color: var(--on-noir-2); background: rgba(255,255,255,0.02);
}
.chip--done { color: var(--gain-soft); border-color: rgba(79,163,131,0.35); background: rgba(79,163,131,0.08); }
.chip--active { color: var(--bronze); border-color: rgba(201,163,107,0.4); background: rgba(201,163,107,0.1); }

.vsession__note {
  min-height: 0; max-height: 0; overflow: hidden; opacity: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 0 14px; border-radius: 12px;
  transition: max-height .5s ease, opacity .45s ease, padding .4s ease, margin .4s ease;
}
.vsession__note--on { max-height: 160px; opacity: 1; padding: 13px 14px; margin-top: 2px; }
.vsession__note.is-detect { background: rgba(197,84,75,0.1); border: 1px solid rgba(197,84,75,0.3); }
.vsession__note.is-win { background: rgba(79,163,131,0.1); border: 1px solid rgba(79,163,131,0.32); }
.vsession__note-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; }
.is-detect .vsession__note-tag { color: var(--loss-soft); }
.is-win .vsession__note-tag { color: var(--gain-soft); }

/* scrubber */
.vsession__foot {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  border-top: 1px solid var(--noir-line-2); background: rgba(255,255,255,0.015);
}
.vsession__play {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--noir-line); color: var(--on-noir);
  font-size: 11px; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.vsession__play:hover { background: rgba(255,255,255,0.12); }
.vsession__track { flex: 1; display: flex; gap: 6px; align-items: center; }
.tick { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.1); cursor: pointer; transition: background .4s; }
.tick--on { background: var(--bronze); }

@media (max-width: 860px) {
  .vsession__grid { grid-template-columns: 1fr; }
  .vsession__stage { border-right: 0; border-bottom: 1px solid var(--noir-line-2); }
  .vsession__transcript { max-height: 240px; }
}