/* ========================================
   SOCIETY ARTS - CHAT ACTION LINKS
   Styles for clickable action buttons in 
   Sadie's chat messages and suggestions
   
   Add this to your story-builder.css or 
   include as a separate file
   ======================================== */

/* Action link buttons inline in chat messages */
.chat-action-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0 2px;
  font: inherit;
  font-weight: 600;
  color: #C73314;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.chat-action-link:hover {
  color: #3E2318;
  text-decoration-color: #3E2318;
}

.chat-action-link:focus {
  outline: 2px solid #C73314;
  outline-offset: 2px;
  border-radius: 2px;
}

.chat-action-link:active {
  color: #8B1A0E;
}

/* ========================================
   ACTION SUGGESTION BUTTONS
   Special styling for [[select styles]] 
   and [[create now]] suggestion bubbles
   ======================================== */

/* Centered layout - action suggestion buttons */
.suggestion-btn.suggestion-action {
  background: #C73314;
  color: white;
  border-color: #C73314;
  font-weight: 600;
}

.suggestion-btn.suggestion-action:hover {
  background: #A82B10;
  border-color: #A82B10;
  color: white;
}

.suggestion-btn.suggestion-action:active {
  background: #8B1A0E;
  border-color: #8B1A0E;
}

/* Canvas layout - action suggestion buttons */
.canvas-ai-suggestion.suggestion-action {
  background: #C73314;
  color: white;
  border-color: #C73314;
  font-weight: 600;
}

.canvas-ai-suggestion.suggestion-action:hover {
  background: #A82B10;
  border-color: #A82B10;
  color: white;
}

.canvas-ai-suggestion.suggestion-action:active {
  background: #8B1A0E;
  border-color: #8B1A0E;
}