html { height: 100%; }
body { min-height: 100%; }
ninja-keys { z-index: 1100; }

.ProseMirror {
  padding: 1rem 1rem 3rem;
  /* border-top: 1px solid #ccc; */
}
/* [contenteditable]:focus, [contenteditable]:active { */
.ProseMirror:focus, .ProseMirror:active {
  outline: none;
}

.ProseMirror :first-child {
  margin-top: 0;
}

button.is-active { background: black; color: white; }
button.hidden { display: none; }

p:empty::after {
  content: ' '; /* nbsp */
}

figure { display: inline-block; }

.max-80ch { max-width: 80ch; }

[draggable=true].hand, [draggable=true] .hand { cursor: grab; }
[aria-grabbed=true], [aria-grabbed=true].hand, [aria-grabbed=true] .hand { cursor: grabbing; }


/* frameworks overrides */

.ProseMirror mark { padding: 0; }
.ProseMirror img { max-width: 100%; }

blockquote {
  border-left: .5rem solid lightgray;
  padding-left: 1rem;
}

.btn {
  /* copied from .btn-sm */
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.offcanvas-header {
  --bs-offcanvas-padding-y: 0.5rem; /* like --bs-navbar-padding-y */
}

.offcanvas.offcanvas-end { border-left: 0; }
.offcanvas { background: #f7f7f5; }
[data-bs-theme=dark] .offcanvas { background: #373735; }

li > p:last-child { margin-bottom: 0; }

.dropdown-menu {
  min-width: clamp(var(--bs-dropdown-min-width), 30ch, 30vw);
  max-width: 80vw;
}

.tooltip {
  --bs-tooltip-max-width: 40ch;
}


/* ANIMATIONS */

@keyframes back-blink {
  50% { background-color: var(--back-blink, rgba(255,212,0,0.56)); }
}

/* SPINNER */

@keyframes loading {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

spinner::after {
  animation: loading 500ms infinite linear;
  border: .1rem solid #32BDA5;
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: inline-block;
  height: .8rem;
  width: .8rem;
}

[aria-busy=true] {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

[aria-busy=true]::after {
  animation: loading 500ms infinite linear;
  border: .1rem solid #807fe2;
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: .8rem;
  left: 50%;
  margin-left: -.4rem;
  margin-top: -.4rem;
  position: absolute;
  top: 50%;
  width: .8rem;
  z-index: 1;
}


/* Comments */

mark[data-comment] .active {
  border-bottom: 2px solid rgb(255, 212, 0);
}

.active[data-comment] {
  background-color: hsl(46, 100%, 90%);
}

mark[data-count="0"] { background-color: inherit; }
mark[data-count="1"] { background-color: hsl(46, 100%, 90%); }
mark[data-count="2"] { background-color: hsl(46, 100%, 80%); }
mark[data-count="3"] { background-color: hsl(46, 100%, 70%); }

.comment-pending {
  background-color: rgba(255,212,0,0.56) !important;
  border-bottom: 1px solid rgb(255, 212, 0);
}

.tooltip-widget {
  display: inline-block;
  position: relative;
}

.tooltip-itself {
  position: absolute;

  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%,0);
  white-space: nowrap;

  padding: 10px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  text-align: center;
}

.tooltip-itself::after {
    background-color: #000;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 999;

    left: calc(50% - 8px);
    bottom: -8px;
    clip-path: polygon(0 50%, 50% 100%, 100.00% 50%);
}

/* Complete */

.ai-completed {
  color: var(--bs-primary);
  filter: brightness(1.3);
}

/* .inline-form input, .inline-form button {display: inline-block} */


/* LAYOUT */

.icon {
  height: 1em;
  width: 1em;
  min-width: 1em;
  vertical-align: -.125em;
  display: inline-block;
  fill: currentColor;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* COMPONENTS */

pre.hljs {
  border-radius: .5rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

.icon.active {
  color: var(--bs-primary);
}

.left-affinity {
  border-bottom: 1px solid gray;
  border-bottom-right-radius: 2px;
}

.right-affinity {
  border-bottom: 1px solid gray;
  border-bottom-left-radius: 2px;
}

.suggestion {
  border: 1px solid var(--bs-primary-bg-subtle);
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

:root { --inactive-selection-color: #d7d7d7; }
[data-bs-theme=dark] :root { --inactive-selection-color: #0c0d0e; }

.virtual-selection {
  background-color: var(--inactive-selection-color);
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

.virtual-cursor:after {
  content: "";
  border-right: 1px solid var(--bs-body-color);
  margin-right: -1px;
}


/* sticky widget with bootstrap popover inside */

.sticky-widget {
  position: relative;
}

.sticky-widget-inner {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translate(-50%, 12px);
}

.sticky-widget-inner-top {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, -1.5em);
}

.sticky-widget-inner .popover-arrow, .sticky-widget-inner-top .popover-arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}


/* print stylesheet */

@media print {
  header { display: none; }
  .virtual-selection, .virtual-cursor { display: none; }
  .ProseMirror-widget { display: none; }
}