/*
 * 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 in the manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.diff del {
  background-color: #fecaca;
  color: #7f1d1d;
  text-decoration: line-through;
  padding: 1px 2px;
  border-radius: 2px;
}

.diff ins {
  background-color: #bbf7d0;
  color: #14532d;
  text-decoration: none;
  padding: 1px 2px;
  border-radius: 2px;
}

[data-hide-suggestions] [data-suggestions] {
  display: none;
}

@media (min-width: 1024px) {
  .content-suggested-wrapper {
    max-width: calc(130ch + 2rem);
  }
}

@media (min-width: 1024px) and (max-width: 1364px) {
  .content-suggested-wrapper:has(~ [data-controller="chat-bubble"][data-chat-mode="inline"]) {
    flex-direction: column;
  }
}

@media (min-width: 1365px) {
  .content-suggested-wrapper:has(~ [data-controller="chat-bubble"][data-chat-mode="inline"]) {
    flex-grow: 2;
  }
}

[data-controller="chat-bubble"][data-chat-mode="inline"] {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 65ch;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  height: calc(100vh - 2rem);
}

[data-controller="chat-bubble"][data-chat-mode="inline"] > button {
  display: none !important;
}

[data-controller="chat-bubble"][data-chat-mode="inline"] [data-chat-bubble-target="panel"] {
  display: flex !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  z-index: auto !important;
}