/* Rich document polish v28: calmer Feishu-like interactions and article-aligned typography. */

.rich-document-editor,
.local-workflow-article {
  --doc-body-size: 18px;
  --doc-body-leading: 1.85;
  --doc-h2-size: 30px;
  --doc-h3-size: 22px;
  --doc-content-measure: var(--measure-reading, 90ch);
  --doc-motion-fast: 150ms;
  --doc-motion-exit: 110ms;
  --doc-motion-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

.rich-document-editor {
  grid-template-rows: 64px 54px minmax(0, 1fr);
}

.rich-editor-toolbar {
  gap: 4px;
  padding-block: 7px;
  background: rgb(15 15 15 / 98%);
}

.rich-editor-toolbar button,
.rich-style-select,
.rich-style-select select {
  min-height: 38px;
}

.rich-editor-toolbar button,
.rich-style-select select {
  font-size: 13px;
  transition:
    border-color var(--doc-motion-fast) var(--doc-motion-ease),
    background-color var(--doc-motion-fast) var(--doc-motion-ease),
    color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-toolbar-hint {
  color: #6e6e6e;
  font-size: 12px;
  line-height: 1.4;
}

.rich-editor-layout {
  grid-template-columns: 220px minmax(0, 900px);
  gap: 44px;
  width: min(1210px, calc(100% - 48px));
  padding-top: 32px;
}

.rich-editor-outline {
  top: 28px;
}

.rich-editor-outline nav button {
  min-height: 46px;
  color: #858585;
  font-size: 13px;
  line-height: 1.45;
  transition: color var(--doc-motion-fast) var(--doc-motion-ease), background-color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-editor-outline nav button:hover,
.rich-editor-outline nav button:focus-visible {
  background: rgb(255 255 255 / 2.4%);
}

.rich-document-paper {
  padding: 58px 64px 68px;
  border-color: #333333;
  background: #141414;
  box-shadow: 0 28px 84px rgb(0 0 0 / 28%);
}

.draft-document-title {
  max-width: 20em;
  font-size: clamp(40px, 3.2vw, 46px);
  font-weight: 650;
  line-height: 1.14;
}

.draft-document-summary {
  max-width: 46em;
  min-height: 58px;
  margin-top: 18px;
  color: #a9a9b0;
  font-size: var(--doc-body-size);
  line-height: 1.8;
}

.draft-document-facts {
  margin-top: 28px;
  padding-block: 19px;
}

.draft-document-facts dt {
  font-size: 12px;
  line-height: 1.5;
}

.draft-document-facts dd {
  font-size: 13px;
  line-height: 1.5;
}

.rich-document-tip {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  margin: 30px 0 22px;
  padding: 11px 13px;
  border-color: #303030;
  background: #111111;
}

.rich-document-tip > span {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.rich-document-tip p {
  color: #848484;
  font-size: 13px;
  line-height: 1.55;
}

.rich-document-tip strong {
  display: inline;
  margin-right: 7px;
  color: #c6c6c6;
  font-size: 13px;
}

.rich-editor-surface {
  max-width: var(--doc-content-measure);
  color: #cecece;
  font-size: var(--doc-body-size);
  line-height: var(--doc-body-leading);
}

.rich-editor-surface h2,
.local-rich-article h2 {
  margin: 58px 0 18px;
  font-size: var(--doc-h2-size);
  line-height: 1.3;
}

.rich-editor-surface h3,
.local-rich-article h3 {
  margin: 40px 0 14px;
  font-size: var(--doc-h3-size);
  line-height: 1.35;
}

.rich-editor-surface p,
.local-rich-article p {
  margin: 12px 0;
  font-size: var(--doc-body-size);
  line-height: var(--doc-body-leading);
}

.rich-editor-surface li,
.local-rich-article li,
.rich-editor-surface blockquote,
.local-rich-article blockquote {
  font-size: var(--doc-body-size);
  line-height: var(--doc-body-leading);
}

.rich-editor-surface [data-doc-block] {
  border-radius: 3px;
  transition:
    background-color 170ms var(--doc-motion-ease),
    box-shadow 170ms var(--doc-motion-ease),
    opacity var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-editor-surface [data-doc-block].is-block-hovered {
  background: rgb(255 255 255 / 1.3%);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 1.3%);
}

.rich-editor-surface [data-doc-block].is-block-dragging {
  opacity: 0.52;
  box-shadow: 0 12px 30px rgb(0 0 0 / 24%);
}

.rich-editor-surface [data-doc-block].is-drop-before::before,
.rich-editor-surface [data-doc-block].is-drop-after::after {
  height: 1px;
  box-shadow: 0 0 0 3px rgb(255 77 77 / 9%);
  animation: rich-drop-line-in var(--doc-motion-fast) var(--doc-motion-ease) both;
}

@keyframes rich-drop-line-in {
  from { opacity: 0; transform: scaleX(0.92); }
  to { opacity: 1; transform: scaleX(1); }
}

.rich-block-rail {
  width: 72px;
  min-height: 34px;
  border-color: #3b3b3b;
  background: rgb(27 27 27 / 98%);
  box-shadow: 0 12px 34px rgb(0 0 0 / 30%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px) scale(0.985);
  transform-origin: right center;
  transition:
    opacity var(--doc-motion-fast) var(--doc-motion-ease),
    transform var(--doc-motion-fast) var(--doc-motion-ease),
    border-color var(--doc-motion-fast) var(--doc-motion-ease);
  will-change: transform, opacity;
}

.rich-block-rail.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.rich-block-rail button {
  width: 32px;
  height: 30px;
  color: #929292;
  transition: color var(--doc-motion-fast) var(--doc-motion-ease), background-color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-block-rail button:hover,
.rich-block-rail button:focus-visible {
  background: #2c2c2c;
}

.rich-block-menu,
.rich-selection-toolbar,
.rich-image-toolbar,
.rich-slash-menu,
.rich-link-popover {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity var(--doc-motion-fast) var(--doc-motion-ease),
    transform var(--doc-motion-fast) var(--doc-motion-ease),
    border-color var(--doc-motion-fast) var(--doc-motion-ease);
  will-change: transform, opacity;
}

.rich-block-menu.is-open,
.rich-selection-toolbar.is-open,
.rich-image-toolbar.is-open,
.rich-slash-menu.is-open,
.rich-link-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.rich-block-menu,
.rich-selection-toolbar,
.rich-image-toolbar {
  border-color: #414141;
  background: rgb(27 27 27 / 98%);
  box-shadow: 0 20px 60px rgb(0 0 0 / 48%);
}

.rich-block-menu-heading {
  min-height: 36px;
  font-size: 13px;
}

.rich-block-transform-row button {
  min-height: 66px;
  font-size: 13px;
  transition: background-color var(--doc-motion-fast) var(--doc-motion-ease), border-color var(--doc-motion-fast) var(--doc-motion-ease), color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-block-menu > button {
  min-height: 42px;
  font-size: 14px;
  transition: background-color var(--doc-motion-fast) var(--doc-motion-ease), color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-block-menu kbd {
  font-size: 11px;
}

.rich-selection-toolbar button,
.rich-image-toolbar button {
  min-height: 34px;
  font-size: 13px;
  transition: background-color var(--doc-motion-fast) var(--doc-motion-ease), color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-slash-menu {
  border-color: #424242;
  background: rgb(24 24 24 / 98%);
  box-shadow: 0 22px 64px rgb(0 0 0 / 50%);
}

.rich-slash-menu header strong {
  font-size: 13px;
}

.rich-slash-search input {
  font-size: 14px;
}

.rich-slash-menu button {
  min-height: 58px;
  transition: background-color var(--doc-motion-fast) var(--doc-motion-ease), color var(--doc-motion-fast) var(--doc-motion-ease);
}

.rich-slash-menu button:hover,
.rich-slash-menu button:focus-visible,
.rich-slash-menu button.is-active {
  background: #292929;
  outline: 0;
}

.rich-slash-menu button strong {
  font-size: 14px;
  line-height: 1.4;
}

.rich-slash-menu button small {
  font-size: 12px;
  line-height: 1.45;
}

.rich-link-popover {
  border-color: #424242;
  background: rgb(24 24 24 / 98%);
  box-shadow: 0 20px 58px rgb(0 0 0 / 48%);
  transform: translateX(-50%) translateY(-4px) scale(0.985);
  transform-origin: top center;
}

.rich-link-popover.is-open {
  transform: translateX(-50%) translateY(0) scale(1);
}

.rich-link-popover label span,
.rich-link-popover button {
  font-size: 12px;
}

.rich-link-popover input {
  font-size: 14px;
}

.rich-editor-surface figure.doc-image {
  transition:
    box-shadow 170ms var(--doc-motion-ease),
    width 190ms var(--doc-motion-ease),
    margin-left 190ms var(--doc-motion-ease);
}

.rich-editor-surface figure.doc-image.is-image-active {
  box-shadow: 0 0 0 1px #777777, 0 12px 36px rgb(0 0 0 / 20%);
}

.local-rich-article {
  max-width: var(--doc-content-measure);
  font-size: var(--doc-body-size);
  line-height: var(--doc-body-leading);
}

.local-rich-article-body {
  grid-template-columns: minmax(0, var(--doc-content-measure)) 250px;
  gap: 56px;
}

.rich-document-footer p {
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1020px) {
  .rich-editor-layout {
    grid-template-columns: 1fr;
    width: min(900px, calc(100% - 40px));
  }
}

@media (max-width: 720px) {
  .rich-document-editor,
  .local-workflow-article {
    --doc-body-size: 17px;
    --doc-body-leading: 1.82;
    --doc-h2-size: 26px;
    --doc-h3-size: 21px;
  }

  .rich-editor-layout {
    width: min(100% - 20px, 640px);
  }

  .rich-document-paper {
    padding: 34px 22px 42px;
  }

  .draft-document-title {
    font-size: 32px;
    line-height: 1.18;
  }

  .draft-document-summary {
    min-height: 50px;
    font-size: 17px;
    line-height: 1.75;
  }

  .rich-document-tip {
    margin-top: 24px;
  }

  .rich-document-tip p,
  .rich-document-tip strong {
    font-size: 12px;
  }

  .local-rich-article-body {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rich-block-rail,
  .rich-block-menu,
  .rich-selection-toolbar,
  .rich-image-toolbar,
  .rich-slash-menu,
  .rich-link-popover,
  .rich-editor-toolbar button,
  .rich-editor-outline nav button,
  .rich-block-menu button,
  .rich-slash-menu button,
  .rich-editor-surface [data-doc-block],
  .rich-editor-surface figure.doc-image {
    animation: none !important;
    transition: none !important;
  }
}