/* ---------------------------------------------------------------- *
 * Quill editor
 * ---------------------------------------------------------------- */

.editor-host .ql-container {
  min-height: 400px;
  font-size: 1rem;
}

.editor-host .ql-editor {
  min-height: 400px;
  line-height: 1.6;
}

.editor-host .ql-toolbar.ql-snow,
.editor-host .ql-container.ql-snow {
  border-color: rgba(0, 0, 0, .16);
}

.editor-host .ql-toolbar.ql-snow {
  border-radius: 4px 4px 0 0;
}

.editor-host .ql-container.ql-snow {
  border-radius: 0 0 4px 4px;
}


/* ---------------------------------------------------------------- *
 * Tracked changes
 *
 * The marks live in the Quill delta as class attributors:
 *   ql-si-<changeId>  / ql-sia-<authorKey>   insert
 *   ql-sd-<changeId>  / ql-sda-<authorKey>   delete
 *   ql-sf-<changeId>  / ql-sfa-<authorKey>   format
 *
 * The per-author colour is injected at runtime into
 * <style id="sugg-author-styles"> as a --sugg-color on the ql-s?a-*
 * classes. The fallback below keeps marks visible if that ever fails.
 *
 * Note the substring selectors cannot cross-match: the literal text
 * "ql-si-" does not occur inside "ql-sia-<key>".
 *
 * There are two views of the same document, chosen by a class on the
 * editor host:
 *
 *   .sugg-visible  the reviewer's view - every mark drawn and colour-coded
 *   .sugg-hidden   the author's view - a plain editor
 *
 * In the author's view the marks are not merely uncoloured: deleted text
 * is taken out of the flow entirely. Anything else would show someone the
 * text they just deleted still sitting there, looking as though the
 * deletion had failed. What they see is the document as it will read once
 * everything is accepted, while the tracking carries on underneath.
 * ---------------------------------------------------------------- */

.sugg-visible .ql-editor [class*="ql-si-"] {
  color: var(--sugg-color, #1a7f37);
  text-decoration: underline;
  text-decoration-color: var(--sugg-color, #1a7f37);
  text-underline-offset: 2px;
  cursor: help;
}

.sugg-visible .ql-editor [class*="ql-sd-"] {
  color: var(--sugg-color, #cf222e);
  text-decoration: line-through;
  text-decoration-color: var(--sugg-color, #cf222e);
  opacity: .75;
  cursor: help;
}

.sugg-visible .ql-editor [class*="ql-sf-"] {
  background: color-mix(in srgb, var(--sugg-color, #9a6700) 14%, transparent);
  box-shadow: inset 0 -2px 0 0 var(--sugg-color, #9a6700);
  cursor: help;
}

/* An insert that someone else has since deleted carries both marks. */
.sugg-visible .ql-editor [class*="ql-si-"][class*="ql-sd-"] {
  text-decoration: underline line-through;
}

/* The author's view: struck text simply is not there. */
.sugg-hidden .ql-editor [class*="ql-sd-"] {
  display: none;
}

.sugg-visible .ql-editor [class*="ql-si-"] img,
.sugg-visible .ql-editor [class*="ql-sd-"] img {
  opacity: .45;
  outline: 2px dashed var(--sugg-color, #cf222e);
}

/* Flash used when a side-panel entry is clicked. */
.ql-editor .sugg-flash {
  animation: sugg-flash 1s ease-out;
}

@keyframes sugg-flash {
  from { background-color: rgba(255, 214, 0, .65); }
  to   { background-color: transparent; }
}


/* ---------------------------------------------------------------- *
 * Hover popover
 * ---------------------------------------------------------------- */

.sugg-popover {
  position: fixed;
  z-index: 1500;
  max-width: 340px;

  /* Transparent bridge. The card sits a little away from the mark, and
     without this the gap between them is a dead zone: the pointer leaves
     the mark, lands on plain text, and the popup dismisses itself before it
     can be reached. The padding belongs to the popup, so crossing it counts
     as being on the popup. The offsets in QuillEditor.razor subtract it
     again, so the card appears where it did before. */
  padding: 10px 0;
}

.sugg-popover .sugg-snippet {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 6rem;
  overflow: auto;
}


/* ---------------------------------------------------------------- *
 * Side panel
 * ---------------------------------------------------------------- */

.sugg-panel {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.sugg-panel-item {
  cursor: pointer;
}

.sugg-author-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}