/* "Melhorar com IA" review modal: current text vs. AI suggestion, with the
   word-level diff marks painted by ai_review_controller.js. */

.app-ai-review {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* The legacy rule in main.css pins every desktop `.modal-content` to 740px,
   and that file is loaded after this one with the same specificity — hence the
   extra class here, so the comparison gets the full width it needs. */
.app-ai-review.modal-content {
  width: min(1280px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
}

.app-ai-review:focus {
  outline: none;
}

.app-ai-review__body {
  min-height: 0;
  overflow-y: auto;
}

.app-ai-review__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.75rem;
  color: #64748b;
}

/* This file is loaded after the Tailwind build, so the display above would
   otherwise beat the browser's own [hidden] rule. */
.app-ai-review__legend[hidden] {
  display: none;
}

.app-ai-review__panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.app-ai-review__pane {
  min-width: 0;
}

.app-ai-review__pane-title {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.app-ai-review__text {
  max-height: 42vh;
  overflow-y: auto;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  background: #fcfdff;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #334155;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.app-ai-review__text--suggestion {
  border-color: #cfe3d6;
  background: #f8fdfa;
}

/* Removed in the current text: struck through, not color alone. */
.ai-diff-del {
  background: #fee2e2;
  color: #9f1239;
  text-decoration: line-through;
  border-radius: 3px;
}

/* Added by the suggestion: underlined, not color alone. */
.ai-diff-ins {
  background: #d1fae5;
  color: #065f46;
  text-decoration: underline;
  border-radius: 3px;
}

.app-ai-review__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #fff;
}

/* Same reason as the legend rule above: this file wins over the browser's
   [hidden] rule, so the toggled sections need it spelled out. */
.app-ai-review__actions[hidden],
.app-ai-review__loading[hidden],
.app-ai-review__body[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .app-ai-review__panes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .app-ai-review.modal-content {
    width: calc(100vw - 0.5rem);
    max-height: calc(100dvh - 0.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .app-ai-review__text {
    max-height: 32vh;
  }

  .app-ai-review__actions .ui-btn-cancel,
  .app-ai-review__actions .ui-btn-primary {
    flex: 1 1 100%;
  }
}