body {
  background:#111;
  color:#ddd;
  font-family:sans-serif;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

#outputBox {
  flex:1;
  padding:20px;
  box-sizing:border-box;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Scrollbars */
#outputBox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#outputBox::-webkit-scrollbar-track {
  background: transparent; /* remove white background */
}

#outputBox::-webkit-scrollbar-thumb {
  background-color: #0a84ff; /* blue */
  border-radius: 6px;
}

#outputBox::-webkit-scrollbar-thumb:hover {
  background-color: #204cff; /* darker blue on hover */
}

/* User bubble */
.bubble.user {
  background: #0a84ff;
  display: flex;
  flex-direction: row-reverse; /* image on right */
  align-items: flex-start;
  align-self: flex-end;
  color: white;
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  gap: 8px; /* space between text and image */
}

/* User image inside bubble */
.bubble.user img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0; /* remove bottom margin since it's side by side now */
}

/* AI content container (no bubble) */
.aiContent {
  opacity:0;
  animation:fadeIn 0.5s forwards;
  max-width:90%;
  word-wrap:break-word;
  white-space:pre-wrap;
}

/* Fade-in animation */
@keyframes fadeIn {
  to { opacity:1; }
}

/* Code block inside AI content */
.codeWrapper {
  background:rgba(0,0,0,0.9);
  border-radius:6px;
  overflow:visible;
  margin:6px 0;
}

.codeTopBar {
  background:#000;
  color:#fff;
  font-family:monospace;
  font-size:12px;
  padding:4px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:6px 6px 0 0;
}

.codeInner {
  padding:10px 12px;
  white-space:pre-wrap;
  font-family:monospace;
  font-size:14px;
}

.codeCopyBtn {
  background:#0a1da8;
  color:white;
  border:none;
  border-radius:4px;
  padding:2px 6px;
  font-size:11px;
  cursor:pointer;
}

.codeCopyBtn:hover { background:#204cff; }

.aiContent table {
  border-collapse:collapse;
  width:100%;
  background:rgba(255,255,255,0.05);
  margin:10px 0;
}

.aiContent th,
.aiContent td {
  border:1px solid rgba(255,255,255,0.35);
  padding:6px 10px;
  text-align:left;
}

.aiContent th {
  background:rgba(255,255,255,0.15);
  font-weight:bold;
}