/* Floating button */
#jsam-ai-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25003e;
  color: #ffc600;
  font-weight: bold;
  border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  z-index: 99999;
  user-select: none;
  touch-action: none; /* enable pointer dragging on mobile */
}

/* Panel */
#jsam-ai-panel {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 340px;
  max-height: 440px;
  background: #ffffff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
}

.ai-header {
  background: #25003e;
  color: #ffc600;
  padding: 10px 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-header #ai-close{
  background: transparent;
  border: 0;
  font-size: 18px;
  color: #ffc600;
  cursor: pointer;
}

.ai-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  font-size: 14px;
  background: #fafafa;
  color: #111;
}

/* Input row */
.ai-input {
  display: flex;
  border-top: 1px solid #e6e6e6;
}
#jsam-ai-panel .ai-input input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 10px 12px;
  background: #ffc600 !important;  /* force gold in all themes */
  color: #000 !important;           /* black text */
  caret-color: #000 !important;
  font-weight: 600;
  border-radius: 0;
  box-shadow: none !important;
}
#jsam-ai-panel .ai-input input::placeholder {
  color: #000 !important;
  opacity: .75;
}
#jsam-ai-panel .ai-input button {
  background: #25003e;
  color: #ffc600;
  border: none;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700;
}

/* Suggest box */
.ai-suggest {
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid #eee;
  background: #fff;
  display: none; /* toggled by JS */
}

/* Track rows */
.ai-track {
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.ai-track img {
  width: 50px; height: 50px;
  margin-right: 10px;
  border-radius: 8px;
  object-fit: cover;
}
.ai-track-info {
  display: flex; flex-direction: column;
}
.ai-track-info strong { font-size: 14px; line-height: 1.2; }
.ai-track-info span { font-size: 12px; opacity: .8; }

/* Suggest compact look */
.ai-track-suggest { margin: 0; padding: 8px 10px; border-bottom: 1px dashed #eee; }
.ai-track-suggest:last-child { border-bottom: 0; }
.ai-track-suggest .ai-track-info strong { font-size: 13px; }

/* Dark mode support (common selectors + forced input colors) */
@media (prefers-color-scheme: dark) {
  #jsam-ai-panel { background: #111; color: #f0f0f0; }
  .ai-messages { background: #161616; color: #f0f0f0; }
  .ai-suggest { background: #111; }
  .ai-track-suggest { border-bottom-color: #2a2a2a; }
}
/* Also handle sites using .dark or [data-theme="dark"] */
.dark #jsam-ai-panel,
[data-theme="dark"] #jsam-ai-panel { background: #111; color: #f0f0f0; }
.dark .ai-messages,
[data-theme="dark"] .ai-messages { background: #161616; color: #f0f0f0; }
.dark .ai-suggest,
[data-theme="dark"] .ai-suggest { background: #111; }

/* Beat overly opinionated themes */
#jsam-ai-panel input,
#jsam-ai-panel input:focus {
  background: #ffc600 !important;
  color: #000 !important;
  caret-color: #000 !important;
}