/* ==============================
   80085 Adaptive Succinctism UI
   ============================== */

/* Root - dark baseline with cheeky punch */
#col_container {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #0f1014 !important; /* pitch black, no nonsense */
  color: #e0e0e0 !important; /* crisp, almost white */
  font-family: 'IBM Plex Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  box-sizing: border-box !important;
  user-select: text !important;
}

/* Header - Minimal, sleek bar with subtle gradient and bold accent */
#component-7 {
  display: flex !important;
  order: 1 !important;
  flex: 0 0 44px !important;
  justify-content: center !important;
  align-items: center !important;
  background: linear-gradient(45deg, #22252b, #1a1c20) !important;
  border-bottom: 1px solid #444a56 !important;
  padding: 0 14px !important;
  user-select: none !important;
  font-weight: 700 !important;
  color: #ff54a5 !important; /* bold hot pink accent */
  letter-spacing: 0.09em !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-shadow: 0 0 4px #ff54a5aa;
  transition: background-color 0.25s ease;
}
#component-7:hover {
  background: linear-gradient(135deg, #2d1a2f, #3c2847) !important;
}

/* Run button - playful, simple and robust */
#component-9 {
  display: inline-flex !important;
  background-color: #ff54a5 !important;
  border-radius: 12px !important;
  color: #121212 !important; /* sharp black on pink */
  padding: 6px 26px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  user-select: none !important;
  border: 2px solid #d73385 !important;
  box-shadow: 0 2px 6px #d7338588 !important;
  transition: background-color 0.3s ease !important, box-shadow 0.2s ease !important;
  font-size: 1rem;
}
#component-9:hover:enabled {
  background-color: #d73385 !important;
  box-shadow: 0 4px 14px #ff54a5cc !important;
  transform: translateY(-2px);
}
#component-9:active:enabled {
  transform: translateY(-1px);
  box-shadow: 0 2px 7px #d73385cc !important;
}

/* Form container */
.form.svelte-633qhp {
  order: 2 !important;
  padding: 0 12px !important;
  z-index: 10;
}

/* Textarea - simple, crisp, with playful accent */
textarea.scroll-hide.svelte-173056l {
  max-height: 48vh !important;
  background-color: #1a1b1f !important;
  border: 2px solid #ff54a5 !important;
  border-radius: 12px !important;
  color: #e9d0f7 !important;
  font-family: 'Consolas', monospace !important;
  font-size: 1.1rem !important;
  padding: 10px 18px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  outline: none !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
  caret-color: #ff54a5 !important;
  user-select: text !important;
}
textarea.scroll-hide.svelte-173056l:focus {
  border-color: #ff78b3 !important;
  box-shadow: 0 0 14px #ff78b366 !important;
}

/* Chat container */
#chatbot {
  display: flex !important;
  order: 3 !important;
  flex: 1 1 auto !important;
  flex-direction: column-reverse !important;
  overflow-y: auto !important;
  padding: 14px !important;
  background-color: #111317 !important;
  color: #f3e1f7 !important;
  font-size: 1.08rem !important;
  font-weight: 600;
  line-height: 1.48;
  box-sizing: border-box !important;
  user-select: text !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ff54a5 #111317 !important;
}

/* Message bubbles */
/* User bubbles - sassy pink with smooth shape */
.message-row.bubble.user-row {
  background-color: rgba(255, 84, 165, 0.17) !important;
  color: #ffd3ea !important;
  align-self: flex-start !important;
  border-radius: 24px 24px 4px 24px !important;
  margin: 6px 0 !important;
  padding: 12px 26px !important;
  max-width: 78vw !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: 0 0 6px #ff9ac7cc;
  cursor: text !important;
  user-select: text !important;
  transition: background-color 0.3s ease !important;
}
.message-row.bubble.user-row:hover {
  background-color: rgba(255, 134, 192, 0.27) !important;
}

/* Bot bubbles - dark plum with subtle glow */
.message-row.bubble.bot-row {
  background-color: rgba(38, 17, 42, 0.82) !important;
  color: #eac7f0 !important;
  align-self: flex-end !important;
  border-radius: 24px 24px 24px 4px !important;
  margin: 6px 0 !important;
  padding: 12px 26px !important;
  max-width: 78vw !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: 0 0 5px #be72d4cc;
  cursor: text !important;
  user-select: text !important;
  transition: background-color 0.3s ease !important;
}
.message-row.bubble.bot-row:hover {
  background-color: rgba(57, 28, 65, 0.9) !important;
}

/* Scrollbar - minimal sharp pink */
#chatbot::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
#chatbot::-webkit-scrollbar-track {
  background: #1b1b1f !important;
  border-radius: 8px !important;
}
#chatbot::-webkit-scrollbar-thumb {
  background-color: #ff54a5 !important;
  border-radius: 8px !important;
  border: 2px solid #1b1b1f !important;
  transition: background-color 0.2s ease;
}
#chatbot::-webkit-scrollbar-thumb:hover {
  background-color: #ff79b7 !important;
}

/* Text selection - playful and bright */
::selection {
  background: #ff54a588 !important;
  color: #340816 !important;
  text-shadow: none !important;
  user-select: text !important;
}
::-moz-selection {
  background: #ff54a588 !important;
  color: #340816 !important;
  text-shadow: none !important;
  user-select: text !important;
}

/* Focus outline - sharp pink halos */
*:focus-visible {
  outline: 2.5px solid #ff54a5cc !important;
  outline-offset: 4px !important;
  box-shadow:
    0 0 12px #ff54a5aa !important;
  transition: outline 0.25s ease, box-shadow 0.25s ease;
}
#component-9:focus-visible {
  outline: 3.5px solid #ff79b7cc !important;
  box-shadow:
    0 0 20px #ff79b7bb;
}

/* Smooth transitions */
#col_container,
#component-7,
#component-9,
textarea.scroll-hide.svelte-173056l,
.message-row.bubble.user-row,
.message-row.bubble.bot-row {
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}