/* frontend/static/styles.css — minor custom styling on top of Tailwind */
html, body { margin: 0; height: 100%; }
*{ box-sizing: border-box; }

/* Thin scrollbars like Gemini */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

.bubble { line-height: 1.6; word-wrap: break-word; }
.bubble p { margin: .4rem 0; }
.bubble ul, .bubble ol { margin: .4rem 0 .4rem 1.2rem; list-style: revert; }
.bubble li { margin: .2rem 0; }
.bubble code { background: rgba(255,255,255,.08); padding: .1rem .35rem; border-radius: 6px; font-size: .9em; }
.bubble pre { background: #0d0e0f; border: 1px solid rgba(255,255,255,.08); padding: .8rem; border-radius: 10px; overflow-x:auto; margin: .5rem 0; }
.bubble pre code { background: transparent; padding: 0; }
.bubble h1,.bubble h2,.bubble h3 { font-weight: 600; margin: .6rem 0 .3rem; }
.bubble strong { color: #d7e8d2; }

/* "Pezano sedang mencari basis data ..." waiting status */
.thinking-status { color: #9aa0a6; font-style: italic; }
.thinking-status .dots span { animation: blink 1.2s infinite; }
.thinking-status .dots span:nth-child(2){ animation-delay:.2s; }
.thinking-status .dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }

/* action toolbar on assistant answers — hidden until the answer is fully written */
.bubble-actions {
  display: flex; gap: 6px; margin-top: 8px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.bubble-actions.ready { opacity: .55; visibility: visible; }
.bubble-actions.ready:hover { opacity: 1; }
.bubble-actions button {
  font-size: .72rem; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.06); color: #cdd3cb;
  border: 1px solid rgba(255,255,255,.08); cursor: pointer;
}
.bubble-actions button:hover { background: rgba(255,255,255,.14); color: #eaf0e3; }

/* typing caret — blinking cursor at the end of the streaming answer */
.caret { color: #a8c8a0; font-weight: 400; margin-left: 1px; }
.caret.blink { animation: caretblink 1s steps(2, start) infinite; }
@keyframes caretblink { to { visibility: hidden; } }

.user-msg { background:#1e1f20; }
.ai-msg { background: transparent; }

#input { scrollbar-width: thin; }