/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("/assets/trix-65afdb1d.css");
@import url("/assets/actiontext-e646701d.css");
@import url("/assets/custom_actiontext-41b05680.css");

/* AI Chat Styling */
.ai-chat-content ol {
  margin-left: 1.5rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding-left: 0 !important;
  list-style-type: decimal !important;
}

.ai-chat-content li {
  margin-bottom: 0.25rem !important;
  display: list-item !important;
}

.ai-chat-content strong {
  font-weight: bold !important;
  color: inherit !important;
}

.ai-chat-content em {
  font-style: italic !important;
  color: inherit !important;
}

/* Typing cursor animation */
.typing-cursor {
  display: inline-block;
  animation: blink 1s infinite;
  font-weight: normal;
  color: #4B5563;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Tab system classes */
.is-hidden {
  display: none !important;
}

.tab-button {
  padding: 0.5rem 0.25rem;
  border-bottom: 2px solid;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.tab-button--inactive {
  border-color: transparent;
  color: #6b7280;
}

.tab-button--inactive:hover {
  color: #4b5563;
  border-color: #d1d5db;
}

.tab-button--active {
  border-color: #6b7280;
  color: #4b5563;
}

/* Avatar styling */
#avatar-preview {
  border-radius: 50% !important;
  overflow: hidden !important;
}

#avatar-preview img {
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}